在父减速器与子减速器中完成的反应redux逻辑

时间:2016-08-28 23:35:58

标签: javascript reactjs redux react-redux

在react redux doc todo示例中,Dan将类型TOGGLE_TODO的操作传递给todos,然后将其传递给每个单独的待办事项。我注意到他的逻辑是检查todo.id缩减器中的todo。这个逻辑不能在todos中完成吗?对我来说,在更高级别处理逻辑似乎更好,因为你在每个待办事项中进行迭代,而不是将工作传递给每个待办事项并让他们弄清楚他们是否需要切换或现在。 Dan是否有理由这样做?

const todo = (state = {}, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      }
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state
      }

      return Object.assign({}, state, {
        completed: !state.completed
      })

    default:
      return state
  }
}

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ]
    case 'TOGGLE_TODO':
      return state.map(t =>
        todo(t, action)
      )
    default:
      return state
  }
}

export default todos

2 个答案:

答案 0 :(得分:1)

我认为你是对的,如果你从redux源代码库看一下todomvc example,你只会看到一个todos减速器。

文档可能有点过时,或者这种嵌套的缩减器可能只是其可能性的一个例子。

答案 1 :(得分:0)

这只是构建reducer逻辑的一种可能方法。在这种情况下,看起来Dan选择定义一个函数来处理更新单个待办事项的情况,然后通过在更高级别的迭代逻辑中使用它来为多个案例重用该函数。