redux Reducer

最新推荐文章于 2024-07-18 13:11:52 发布

爱运动的程序员

最新推荐文章于 2024-07-18 13:11:52 发布

阅读量271

点赞数

分类专栏： redux 文章标签： javascript reactjs

本文链接：https://blog.csdn.net/qq_45429539/article/details/114301167

版权

本文详细介绍了Redux Reducer的设计与拆分过程，包括如何设计State结构，处理Action，以及如何将Reducer拆分为多个子Reducer以提高可维护性。通过一个todo应用实例，展示了如何根据Action更新state，并强调了Reducer的纯函数特性，不应直接修改state。最后，提到了combineReducers()工具的使用，简化了多个Reducer的组合操作。

摘要由CSDN通过智能技术生成

Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的

设计 State 结构

以 todo 应用为例，需要保存两种不同的数据：

当前选中的任务过滤条件；
完整的任务列表。

{
   
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
   
      text: 'Consider using Redux',
      completed: true,
    },
    {
   
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}

Action 处理

现在我们已经确定了 state 对象的结构，就可以开始开发 reducer。reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。
现在处理 SET_VISIBILITY_FILTER。需要做的只是改变 state 中的 visibilityFilter。

function todoApp(state = initialState, action) {
   
  switch (action.type) {
   
    case SET_VISIBILITY_FILTER:
      return Object.assign({
   }, state, {
   
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

注意:

1.不要修改 state。使用 Object.assign() 新建了一个副本。不能这样使用 Object.assign(state, { visibilityFilter: action.filter })，因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。你也可以开启对 ES7 提案对象展开运算符的支持, 从而使用 { …state, …newState } 达到相同的目的。

2.在 default 情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state。

拆分 Reducer

目前的代码看起来有些冗长：

function todoApp(state = initialState, action) {
   
  switch (action.type) {
   
    case SET_VISIBILITY_FILTER:
      return Object.assign({
   }, state, {
   
        visibilityFilter: action.filter
      })
    case ADD_TODO:
      return Object.assign({
   }, state, {
   
        todos: