React全家桶之Redux专题《二》

1.React + Redux

1.1 在Redux中，为action传递参数

// 1. 在布局点击事件中传入参数
<button onclick={()=> increment ( 5 ) }> + </button>
<button onclick={()=> idecrement ( 5 ) }> - </button>

// 2. 在action中接收参数
原：export const increment = （）=>（{ type : ' increment ' }）
新：export const increment =  payload =>（{ type : ' increment ' ，payload}）

// 3. 在reducer中处理数据
export default  (state = initialState, action) {
      switch (action.type) {
        case 'increment': // 这里的名字可以抽取出来为公共变量
          return {count: state.count + action.payload};
        case 'decrement':
          return {count: state.count - action.payload}
        default:
          return state;
      }
    }

1.2 在reducer中处理数据时注意事项

export default  (state = initialState, action) {
      switch (action.type) {
        case 'show': 
        // 为了防止新增的数据把之前的数据覆盖，所以这里需要用扩展运算符把之前的对象合并进来
          return {
				... state ，
				show：true
		 }
        default:
          return state;
      }
    }

最后：当reducer中业务逻辑复杂时，建议将reducer拆分，最后再通过combineReucers合并reducer

1.3 通过combineReucers合并reducer

1. 例如有两个拆分之后的reducer，分别为OneReducer和TwoReducer
2. 新建一个root.reducer.js , 引入combineReucers以及reducer
3. 页面中用的时候需要state.counter.对象

import { combineReucers } from ' redux '
import  OneReducer from ' ../oneReducer'
import  TwoReducer from ' ../twoReducer'

export default combineReucers({
		counter : OneReducer,
		model : TwoReducer
})

1.4 最后在createStore中传入合并之后的大的reducer

import {createStore} from ’ redux’
import RootReducer from ‘./root.reducer’

export const store = createStore ( RootReducer )