React 基础笔记(redux 拆分成多个小 redux 版本)(十八)

有时候逻辑非常复杂我们需要将各个部件分成多个 reducer 这样好区分

建立组件里面小的 reducer 文件

在每个组件下面建立文件夹起名叫 reducer 文件夹里面创建个 reducer.js 文件

import { ACTION_FOCUSED_CHANGE } from '../../../store/actionTypes'
const defaultState = {
  focused: false
}
export default (state = defaultState, action) => {
  if (action.type === ACTION_FOCUSED_CHANGE) {
    let newState = JSON.parse(JSON.stringify(state))
    newState.focused = !newState.focused
    return newState
  }
  return state
}

修改总的 reducer 文件，引入小组件的 reducer 文件

• 必须借助 redux 里面的 combineReducers

import { combineReducers } from 'redux'
import headerReducer from '../commoncomponents/header/reducer/reducer'
export default combineReducers({
  header: headerReducer
})

修改组件里面的文件 引入 state 的时候变量名称必须变了(重要)

• 原先 state.focuesd 现在变成了 state.header.focused 对应就是总的 redux 起的名字

const mapStateToProps = state => {
  return {
    focused: state.header.focused //要改变了
  }
}
const mapDispatchToProps = dispatch => {
  return {
    handlefocus() {
      let value = METHOD_ACTION_CHANGEFOCUSED()
      dispatch(value)
    },
    handleblur() {
      let value = METHOD_ACTION_CHANGEFOCUSED()
      dispatch(value)
    }
  }
}
export default connect(
  mapStateToProps, //这里面放的是数据
  mapDispatchToProps //里面放的是操作的数据的方法
)(HeaderWrap)

总结

1.要是业务量大了,就必须要拆分