如何将方法置于Redux状态的对象上？

小编典典

如何将方法置于Redux状态的对象上？

reactjs

根据文档，反应应用程序的状态必须是可序列化的。那班呢？

假设我有一个ToDo应用。到目前为止，每个Todo项目都具有name，date等属性。现在，我想对不可序列化的对象使用方法。即Todo.rename()这将重命名待办事项，做了很多其他的东西。

据我了解，我可以在某处声明rename(Todo)函数，然后通过props将该函数传递this.props.rename(Todo)给组件。

我在声明.rename()某个地方时遇到两个问题：1）在哪里？在减速器中？would be instance在应用程序的化简器中很难找到所有方法。2）传递此功能。真？我应该通过所有更高级别的组件手动传递它吗？每当我有更多方法时，添加大量的样板即可将其传递下去？或者总是这样做，并希望我对一种类型的对象只有一种重命名方法。不Todo.rename()
Task.rename()和Event.rename()

这对我来说似乎很愚蠢。对象应该知道可以做什么以及用哪种方式。是不是？

我在这里想念的是什么？

阅读 210

2020-07-22

共1个答案

小编典典

在Redux中，您实际上没有自定义模型。您的状态应该是普通对象（或不可变记录）。它们不应具有任何自定义方法。

而不是将方法放在模型上（例如TodoItem.rename），您应该 编写处理动作的化简器 。这就是Redux的重点。

// Manages single todo item
function todoItem(state, action) {
  switch (action.type) {
    case 'ADD':
      return { name: action.name, complete: false };

    case 'RENAME':
      return { ...state, name: action.name };

    case 'TOGGLE_COMPLETE':
      return { ...state, complete: !state.complete };

    default:
      return state;
  }
}

// Manages a list of todo items
function todoItems(state = [], action) {
  switch (action.type) {
    case 'ADD':
      return [...state, todoItem(undefined, action)];

    case 'REMOVE':
      return [
        ...state.slice(0, action.index),
        ...state.slice(action.index + 1)
      ];

    case 'RENAME':
    case 'TOGGLE_COMPLETE':
      return [
        ...state.slice(0, action.index),
        todoItem(state[action.index], action),
        ...state.slice(action.index + 1)
      ];
  }
}

如果这仍然没有意义，请通读Redux基础教程，因为您似乎对Redux应用程序的结构有错误的认识。

2020-07-22