在 React redux 应用程序中减少 callback-boilerplate

Question

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

例如，从 redux documentation 中取出 Todo App。让我们假设我们想要扩展这个例子，给定一个待办事项更多的属性：

一个标题
一个due-date
拥有者
更多内容

现在，我要添加其他操作来修改这些属性：

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(标题)
onChangeDueDate(dueData)
onChangeOwner(所有者)
...

并且还必须扩展 TodoList 的回调：

onChangeTitle(索引, 标题)
...

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

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

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

onChange(新数据)

和待办事项列表：

onChangeTodo(索引, 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
  })

在 React redux 应用程序中减少 callback-boilerplate

Reducing callback-boilerplate in react redux app

reactjs

redux

react-redux