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

问题描述

根据 docs，react 应用程序的状态必须是可序列化的.那么课程呢?

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

假设我有一个 ToDo 应用.每个 Todo 项目都有像 name、date 等属性，到目前为止还不错.现在我想在不可序列化的对象上使用方法.IE.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.

据我所知，我可以在某处声明函数并执行 rename(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.

我在某处声明 .rename() 有两个问题:1)在哪里?在减速机?很难在应用程序周围的 reducer 中的某处找到所有 would be instance 方法.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.

您应该编写处理动作的reducer，而不是将方法放在模型上(例如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屋！