减少反应 redux 应用程序中的回调样板

Question

我正在尝试同时使用 react 和 redux。我遇到的问题是，在我看来，当应用程序变得更复杂时，会有很多样板代码。

例如，从 redux documentation 中获取 Todo App。假设我们想要扩展示例，给定一个 todo 更多属性：

• 标题
• 截止日期
• 所有者
• 更多内容

现在，我将添加额外的操作来修改这些属性：

const ADD_TODO = 'ADD_TODO'
const REMOVE_TODO = 'REMOVE_TODO'
const TOGGLE_TODO = 'TOGGLE_TODO'
const CHANGE_TITLE = 'CHANGE_TITLE'
const CHANGE_DUEDATE = 'CHANGE_DUEDATE'
const CHANGE_OWNER = 'CHANGE_OWNER'
... more stuff ...

现在 Todo 的回调必须通过以下方式扩展：

• onChangeTitle(title)
• onChangeDueDate(dueData)
• onChangeOwner(所有者)
• ...

TodoList 的回调也必须扩展：

• onChangeTitle（索引，标题）
• ...

最后，顶级组件必须订阅所有这些回调并调度操作。

这似乎是很多样板，尤其是当组件层次结构更深时。

我最初的想法是，Todo 只有一个回调：

• onChange(newData)

和待办事项列表：

• onChangeTodo(index, newData)

但是newData必须在Todo中创建，这基本上意味着在那里实现reducer之类的东西。

我在这里得到了正确的想法吗？我可以减少这个吗？

Answer 1

我会这样做：

const TODO_PROPERTY_UPDATE = 'TODO_PROPERTY_UPDATE'

这将用于 TODO 的所有属性（title、duedate、owner 等）

行动：

export function updateTodoProperty(index, property, propertyValue) {
  return { type: TODO_PROPERTY_UPDATE, index, property, propertyValue }
}

在你的减速器中：

case TODO_PROPERTY_UPDATE:
  return state.map((todo, index) => {
    if (index === action.index) {
      return Object.assign({}, todo, {
        [action.property]: action.propertyValue
      })
    }
    return todo
  })