參考原文:
redux http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html
react-redux
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

1 創(chuàng)建 Reducer 根據(jù)不同的action 進行 state的刷新 操作 不做異步操作

創(chuàng)建方法 reducerA.js

const initialState = {
    isRefreshing: false,
    loading: false,
    isLoadMore: false,
    noMore: false,
    articleList: {},
    name:"gy",
    password:"123456"
};

export default function ReducerA(state = initialState,action) {
  switch(action.type){
      case "addA":
          return {
              ...state,
              name: action.name
          };
      case "reduceA":
          return {
              ...state,
              name: action.name
          };
      default:
          return state
  }
}

initialState 存儲的是ReducerA中初始的內(nèi)容
default 必須返回state 不能返回undefind

reducerB.js

const initialState = {
    isRefreshing: false,
    loading: false,
    isLoadMore: false,
    noMore: false,
    articleList: {},
    name:"gy",
    password:"123456"
};

export default function ReducerB(state,action) {
  switch(action.type){
      case "addB":
          return {
              ...state,
              username: action.name
          };
      case "reduceB":
          return {
              ...state,
              username: action.name
          };
      default:
          return initialState
  }
}

initialState 存儲的是ReducerB 中的初始化的state
ReducerA 與 ReducerB中的 initialState 是獨立的存在 兩者沒有關(guān)系

合并兩個ReducerA 與 ReducerB 導(dǎo)出最終的Reducer

import ReducerA from './ReducerA'
import ReducerB from './ReducerB'
import {combineReducers} from 'redux'

export default rootReducer = combineReducers({
    ReducerA,
    ReducerB
})

combineReducers 用來合并多個Reducer 以方便 分塊管理
2 創(chuàng)建store

import {createStore , applyMiddleware} from 'redux'

import rootReducer from './reducer/reducer'

import createSagaMiddleware, { END } from 'redux-saga';

const middlewares = []; /*添加的中間組件*/
const sagaMiddleware = createSagaMiddleware();
middlewares.push(sagaMiddleware)

/*關(guān)聯(lián)中間組件*/
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);

export default function configureStore() {
    const  store = createStoreWithMiddleware(rootReducer)
    store.runSaga = sagaMiddleware.run
    store.close = ()=> store.dispatch(END)
    return store
}

3 在組件中使用 store中的數(shù)據(jù)

import {connect} from 'react-redux'

通過connect 來連接組件的props 與 store中的屬性

export default connect(mapStateToProps,mapDispatchToProps)(Login)

關(guān)聯(lián)屬性的方法 mapStateToProps 是把store中的數(shù)據(jù) 綁定到組件的props中

const mapStateToProps = (state,ownProps)=>{
    console.log("state==="+state.ReducerA.name)
    return {
        name:state.ReducerA.name,
        password:state.ReducerA.password
    }
}

mapDispatchToProps 是組件觸發(fā)action 刷新store中的數(shù)據(jù)

const mapDispatchToProps = {
    add : () => {
        return {
            type:"addA",
            name:"addA"
        }
    }
}

組件調(diào)用代碼:

   render(){
        const {add} = this.props;
        return(
            <View style={styles.container}>
                <TextInput style={styles.input} placeholder={this.props.name}></TextInput>
                <TextInput style={styles.input} placeholder={this.props.password}></TextInput>
                <Button onPress={this.gotoLogin}
                        text="登錄"
                        containerStyle={{alignItems:'center',justifyContent:'center',backgroundColor:'blue',width:100,height:40}}
                        style={{color:'yellow',fontSize:16,textAlign:'center'}}
                        activeOpacity={0.8}></Button>
                <Button onPress={add}
                        text="登錄"
                        containerStyle={{alignItems:'center',justifyContent:'center',backgroundColor:'blue',width:100,height:40}}
                        style={{color:'yellow',fontSize:16,textAlign:'center'}}
                        activeOpacity={0.8}></Button>
            </View>
        )
    }