Question

我正试图将react和redux放在一起。我遇到的问题是，当应用程序变得更复杂时，我觉得很多样板代码。

例如，从redux documentation获取Todo App。让我们假设我们想扩展这个例子，给出更多的属性：

标题
截止日期
所有者
更多东西

现在，我将添加addtional Actions来修改这些属性：

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（newData）

和TodoList：

onChangeTodo（index，newData）

但是必须在Todo中创建newData，这基本上意味着在那里实现类似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 app中的回调样板

1 个答案: