如何将方法放在 Redux 状态的对象上?

IT技术 javascript reactjs flux redux
2021-04-17 12:24:30

根据文档,react app 的状态必须是可序列化的。那上课呢?

假设我有一个 ToDo 应用程序。每个Todo项目都有属性,比如namedate等等,到目前为止都很好。现在我想在不可序列化的对象上使用方法。Todo.rename()会重命名 todo 并做很多其他事情。

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

我在.rename()某处声明有两个问题:1)在哪里?在减速机?很难would be instance在应用程序周围的减速器中找到所有方法。2) 传递这个函数。真的吗?我应该从所有更高级别的组件手动传递它通过每次我有更多的方法添加大量样板来传递它吗?或者总是这样做并希望我对一种类型的对象只有一种重命名方法。Todo.rename() Task.rename()Event.rename()

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

我在这里缺少什么?

3个回答

在 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 应用程序的结构有一个错误的想法。

@DanAbramov 我很好奇 josh 最后一个问题的答案。我正在处理类似的情况,其中我有一些属性的总和,但是在哪里放置它而不是类模型 .method?在效果module中?在选择器中?什么是最好的?检查我的更具体的问题:stackoverflow.com/questions/43489294/...我试图阻止将一个new Model()放到商店...
2021-05-23 12:24:30
如果您需要对存储在您的状态中的对象有用的方法,例如定义一个名为“User”的module,并在其中放入执行 User.fullName(user) 等有用功能的函数。或“用户(用户)。全名()”。随心所欲,但存储中的数据应该是普通对象。
2021-05-28 12:24:30
在大多数面向对象的代码中,方法用于获取和设置数据。例如,一个 Todo 项可能有 .getName()。其中一些可能有逻辑:getUrgency() 方法可能会查看任务的截止日期及其优先级,并进行一些数学运算以返回答案。这些函数应该在哪里定义,如果不是作为存储中对象的方法?
2021-05-29 12:24:30
但是,如果您想执行诸如“获取所有可见待办事项”之类的操作,您会将过滤功能放在哪里?将该功能添加到状态是否合适?或者这是不赞成的?
2021-06-04 12:24:30
这是不以为然的。相反,我们建议单独编写此函数以接受 state 参数。我们称这些函数为“选择器”,实际上它们对于 Redux 中的优化很重要。查看redux.js.org/docs/recipes/ComputingDerivedData.html
2021-06-04 12:24:30

Dan 的回答在从头开始编写应用程序时应该如何使用 redux 方面当然是正确的。我的回答是基于一个非理想的激励情况,它可能类似于 OP 的情况以及我正在考虑如何处理它。

我发现自己正在尝试创建一个 redux 应用程序,该应用程序依赖于 redux reducer 中的第 3 方库,该应用程序使用方法对输入对象执行操作,并且我希望将这些输入对象保持在 redux 状态。这是我在伪代码中的激励情况,以及我如何使用 lodash 的分配方法“解决”它:

// Library A is a large 3rd party library I don't want to change
// Library A expects instances of MyClass to have a method 'complexOperation', and also to have property 'a'
LibraryA = class {
  static reliesOnComplexOperation(myClassInstance) {
    if (myClassInstance.complexOperation() && myClassInstance.a < 100) {
      return true;
    } else {
      return false;
    }
  }
}

// MyClass is my own class that I control, and I want to store it's state and make changes to it using the redux reducer.
MyClass = class {
  constructor() {
    this.a = 0;
  }
  myComplexOperation() {
    return a > 10;
  }
}

//and here is my redux reducer, making use of Library A
function reducer(state, action) {
  switch (action.type) {
    case CHANGE_MY_CLASS:
      const myClassInstancePlain = state.myClassInstance;
      // redux has converted myClassInstance into a plain object with no methods, so we need to create a new instance of MyClass, and assign property values from the plain object to the new instance. Using the assign function from lodash library to achieve this - likely not the most efficient way
      const myClassInstance = _.assign(new MyClass(), myClassInstancePlain);

      // now I can pass myClassInstance off to LibraryA, and the complexOperation method will be available
      if (LibraryA.reliesOnComplexOperation(myClassInstance)) {
        myClassInstance.a = 50;
      }
      // I can return myClassInstance as part of the new state, and redux will convert it to a plain object
      return {
        ...state,
        myClassInstance
      };
    default:
      return state;
  }
}

所以这个例子展示了一种将对象与 redux 状态中的方法合并为普通对象的方法,然后添加回这些方法,以便它们可以在 redux reducer 中使用。很想听听丹或其他任何人对这种模式的想法,或者如何做得更好。我在几个地方看到 Dan 发帖说在 redux 中存储带有方法的对象是一个坏主意,所以这里的目标是找到一种方法将对象存储为普通对象,并在需要时以有效的方式附加方法.

Redux 根本不会将您的状态转换为痛苦对象。您的状态最终存储了一个类实例。它不会是痛苦的对象。
2021-05-25 12:24:30
是的@Venryx 是对的,redux 不会转换对象。在我的案例中导致 redux 存储最终以普通对象结束的原因(可能也是 DDS 也看到它的原因)是我正在执行服务器端渲染,然后序列化 redux 存储以将其从服务器端传递到客户端. 序列化过程将存储中的所有内容转换为普通对象。
2021-06-01 12:24:30
@Venryx 除了我的错别字之外,我所说的完全正确,而且我也懒得去证明。这里的代码,设置减速直接从你传递什么createStore这里的代码调用它,并采取一切你回来,并将其存储状态。无需查看它或将其转换为普通对象。
2021-06-11 12:24:30
@DDS 据我所知,这是错误的。(不过,我懒得证明 atm 了:P)
2021-06-13 12:24:30

我不确定这是否完全相关(上下文使用 Redux 和 React),但是我在搜索类似的东西时发现了这个页面,所以我写这个以防万一。

我的动机是,我有状态对象,我想在其中公开该状态的表示而不是状态本身。因此,例如(使用 Immutable.js),我有一个包含一个或多个字段的状态(架构,每个字段由一个唯一标识符标识并存储在 Map 中,以及一个提供字段排序的标识符列表。

我真的不想写这样的东西

state.get('field').get(state.get('order').get(nth))

在靠近reducer之外的任何地方获取第n个字段,以便隐藏内部表示并且可以轻松更改。

我目前正在做的(这是一个实验),是在与减速器相同的文件中添加一个函数:

schema.mapVisibleState = function (state) {
    return {
        getOrderedFields: () => state.get('order').map((fid) => state.get('fields').get(fid)
    }
}

这在相应的 React 组件中使用(以及类似动机的 schema.bindActionCreators 函数):

export const Schema = connect(
    (state) => schema.mapVisibleState (state),
    (dispatch) => schema.bindActionCreators (dispatch)
)(_Schema) ;

现在我可以以正确的顺序访问组件内部的字段,就像this.props.getOrderedFields() 一样,而不必担心底层表示。它还具有额外的优点,即很容易对 getOrderedFields() 函数进行依赖注入。

另外,由于我有一个类似的字段状态结构,我可以扩展它:

schema.mapVisibleState = function (state) {
    return {
        getOrderedFields: () => state.get('order').map((fid) => field.mapVisibleState(state.get('fields').get(fid)),
        getNthField (nth) => field.mapVisibleState(state.get('fields').get(state.get('order').get(nth)))
    }
}
您可能想查看github.com/tommikaikkonen/redux-orm,它在不可变的 Redux 状态之上放置了一个很好的类似于模型类的抽象。
2021-06-07 12:24:30
我们称之为“选择器”,它确实是推荐的查询状态的方式,只是我们不建议将它们放到状态中。请参阅Redux 存储库中的购物车示例为了高效记忆,我们建议使用github.com/reactjs/reselect,如计算派生数据秘籍中所述
2021-06-12 12:24:30