在 Redux 状态下存储具有原型函数的对象

Question

在州内存储类是否被认为是不好的做法？我读到状态应该是易于序列化的对象，类打破了这个约定。

我正在创建一个 Web 应用程序，它使用 React/Redux 和一组支持模型来收集用户的信息。

例如我有以下模型：

class Person {
  constructor(params = {}) {
    this.firstName = params.firstName || '';
    this.lastName = params.lastName || '';
    this.gender = params.gender || '';
    this.dateOfBirth = params.dateOfBirth || '';
    this.stateOfResidence = params.stateOfResidence || '';
    this.email = params.email || '';
  }
  validateField(args) {
    // remove for brevity
  }
  valid(args) {
    // remove for brevity    
  }
}

通过发出以下 actionCreator 将对象添加到存储中：

export function addPerson(args = {}) {
  return (dispatch) => {
    dispatch({
      type: 'ADD_PERSON',
      obj: new Person(args)
    });
  };
}

适当的 person reducer 将其固定到状态中，以便我可以从应用程序的其余部分获取它。

这样，当我从状态中获取对象时，我可以运行它是验证和有效的原型函数，以查看模型是否有效并做出适当的反应。

这是否违反了 React/Redux 惯例？解决这个问题的另一种方法是什么？在使用上述方法的过程中，我可能会运行遇到哪些潜在问题？现在无法预见任何问题......但我也没有太多 React/Redux（~4 个月）

的经验

编辑：

我应该补充一点，我仅通过 reducers 改变对象状态。我小心不要在应用程序的其他地方改变状态。

Answer 1

是的，它通常被认为是一种反模式，因为它破坏了时间旅行调试（Redux 的核心卖点之一）等功能。有关详细信息，请参阅 Redux FAQ。

如果您确实希望在普通数据上有更多类似对象的外观，您可能需要研究类似 redux-orm 的东西。

Answer 2

所以我认为我的代码可以帮助需要找到一种方法来解决转换 class 以通过困难函数运行的问题不支持原型让我的一些代码可以修复它们并且很容易

import React from 'react'
import PropTypes from 'prop-types'

const Link = ({ active, children, onClick }) => (
    <button
       onClick={onClick}
       disabled={active}
       style={{
           marginLeft: '4px',
       }}
    >
      {children}
    </button>
)

Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}

export default Link

在 Redux 状态下存储具有原型函数的对象

Storing objects with prototype functions in Redux state

javascript

state

reactjs

redux