react-native redux 与 react-redux 的基本使用

参考原文:
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 创建 Reducer 根据不同的action 进行 state的刷新 操作 不做异步操作

创建方法 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中初始的内容
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 是独立的存在 两者没有关系

合并两个ReducerA 与 ReducerB 导出最终的Reducer

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

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

combineReducers 用来合并多个Reducer 以方便 分块管理
2 创建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)

/*关联中间组件*/
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中的数据

import {connect} from 'react-redux'

通过connect 来连接组件的props 与 store中的属性

export default connect(mapStateToProps,mapDispatchToProps)(Login)

关联属性的方法 mapStateToProps 是把store中的数据 绑定到组件的props中

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

mapDispatchToProps 是组件触发action 刷新store中的数据

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

组件调用代码:

   render(){
        const {add} = this.props;
        return(
            
                
                
                
                
            
        )
    }