如何将方法放在Redux状态的对象上？ [英] How to put methods onto the objects in Redux state?

问题描述

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

According to docs state of react app has to be something serializable. What about classes then?

假设我有一个ToDo应用程序。
每个 Todo 项目都有 name ， date 等到目前为止一切顺利。
现在我想在不可序列化的对象上使用方法。即 Todo.rename（）这会重命名todo并做很多其他事情。

Let's say I have a ToDo app. Each of Todo items has properties like name, date etc. so far so good. Now I want to have methods on objects which are non serializable. I.e. Todo.rename() which would rename todo and do a lot of other stuff.

据我所知我可以在某处声明函数并执行重命名（Todo）或者通过props this.props.rename（Todo）到组件。

As far as I understand I can have function declared somewhere and do rename(Todo) or perhaps pass that function via props this.props.rename(Todo) to the component.

我有2个问题声明 .rename（）某处：
1）在哪里？在减速机？很难在应用程序周围的reducers中的某处找到所有的实例方法。
2）传递此功能。真？我应该通过
从所有更高级别的组件手动传递它吗？每次我有更多的方法添加大量的样板来传递它？
或者总是如此，并希望我只有一种类型的对象重命名方法。不是 Todo.rename（） Task.rename（）和 Event.rename（）

I have 2 problems with declaring .rename() somewhere: 1) Where? In reducer? It would be hard to find all would be instance methods somewhere in the reducers around the app. 2) Passing this function around. Really? should I manually pass it from all the higher level components via And each time I have more methods add a ton of boilerplate to just pass it down? Or always do and hope that I only ever have one rename method for one type of object. Not Todo.rename() Task.rename() and Event.rename()

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

That seems silly to me. Object should know what can be done to it and in which way. Is not it?

我在这里缺少什么？

推荐答案

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

In Redux, you don't really have custom models. Your state should be plain objects (or Immutable records). They are not expected to have any custom methods.

而不是将方法放到模型上（例如 TodoItem.rename ）你应该编写处理行动的减速器。这就是Redux的重点。

Instead of putting methods onto the models (e.g. TodoItem.rename) you are expected to write reducers that handle actions. That's the whole point of 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的方式有错误的想法应用程序是结构化的。

If this still doesn't make sense please read through the Redux basics tutorial because you seem to have a wrong idea about how Redux applications are structured.

这篇关于如何将方法放在Redux状态的对象上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！