React Native Redux(二)-Redux使用

123

export const ERROR_ACTION = 'ERROR_ACTION';export const LOGIN_PERFORM_ACTION = 'LOGIN_PERFORM_ACTION';export const LOGIN_ACTION = 'LOGIN_ACTION';

12345678910111213141516171819202122232425262728293031323334353637

import NetUtil from '../utils/NetUtil';import * as types from '../constants/ActionTypes';import Global from '../constants/Global';	export function (username, password) {    return (dispatch) => {        dispatch(performLogin());        let url = Global.LOGIN + "username=" + username + "&password=" + password;        NetUtil.get(url, function (res) {            if (res.hasOwnProperty('code')) {                dispatch(errorAction(res));            } else {                dispatch(successLogin(res))            }        })    }}	function performLogin() {    return {        type: types.LOGIN_PERFORM_ACTION    }}	function successLogin(result) {    return {        type: types.LOGIN_ACTION,        data: result    }}	function errorAction(result) {    return {        type: types.ERROR_ACTION,        data: result    }}

12345678910111213141516171819202122232425262728293031

import * as types from '../constants/ActionTypes';	const initialState = {    loading : false,    data:{},    status: null};	export default function login(state = initialState, action){    switch (action.type) {        case types.LOGIN_PERFORM_ACTION:            return Object.assign({}, state, {                loading: true,                status: 'doing'            });        case types.LOGIN_ACTION:            return Object.assign({}, state, {                loading: false,                status: 'success',                data: action.data            });        case types.ERROR_ACTION:            return Object.assign({}, state, {                loading: false,                status: 'failed',                data: action.data            });        default:            return state;    }}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677

import React, {Component} from 'react';import {    StyleSheet,    View} from 'react-native';import Util from '../utils/Util';import Tabs from '../containers/Tabs';import LoadingView from '../components/LoadingView';	import {connect} from 'react-redux';import TextButton from '../components/TextButton';import {performLoginAction} from '../actions/LoginAction';import Register from大专栏  React Native Redux(二)-Redux使用> '../containers/Register';class Login extends Component {    constructor(props) {        super(props);        this.state = {            username: '',            password: ''        };    }	    render() {        const {loginReducer} = this.props;        console.log(loginReducer);        return (            <View style={styles.container}>                            </View>        )    }	    componentDidUpdate() {        const {loginReducer} = this.props;        if (loginReducer.status === 'success') {            const {navigator} = this.props;            navigator.push({                name: 'Tabs',                component: Tabs            })        }        if (loginReducer.status === 'failed'){            Util.showToastCenter(loginReducer.data.error);        }    }	    _login = () => {        const {navigator, dispatch} = this.props;        let username = this.state.username;        let password = this.state.password;        if (Util.isEmpty(username)) {            Util.showToastCenter('用户名为空');            return;        }        if (Util.isEmpty(password)) {            Util.showToastCenter('密码为空');            return;        }        dispatch(performLoginAction(username, password));    };}	const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: '#f5f5f5'    }});	function mapStateToProps(state) {    const {loginReducer} = state;    return {        loginReducer    }}	export default connect(mapStateToProps)(Login);

12345678

function mapStateToProps(state) {	const {loginReducer} = state;	return {   		loginReducer	}}export default connect(mapStateToProps)(Login);

1234567891011

import {combineReducers} from 'redux';import loginReducer from './LoginReducer';import registerReducer from './RegisterReducer';import homeReducer from './HomeReducer';	const rootReducers = combineReducers({    loginReducer,    registerReducer,    homeReducer});export default rootReducers;

12345678

import {createStore, applyMiddleware} from 'redux';import thunkMiddleware from 'redux-thunk';import rootReducers from '../reducers/rootReducers';const createStoreWithMiddleware = applyMiddleware(thunkMiddleware)(createStore);export default function configureStore(initialState) {    const store = createStoreWithMiddleware(rootReducers, initialState);    return store;}

12345678910111213141516171819

import React, {Component} from 'react';import App from '../lifeStyle/App';	import configureStore from '../lifeStyle/store/configureStore';import {Provider} from 'react-redux';	const store = configureStore();	class root extends Component{    render(){        return(            <Provider store={store}>                <App/>            </Provider>        )    }}	export default root;