在 Redux 状态下使用原型函数存储对象答案

【问题标题】：Storing objects with prototype functions in Redux state在 Redux 状态下使用原型函数存储对象
【发布时间】：2016-08-19 10:28:34
【问题描述】：

在 state 中存储类是否被认为是不好的做法？我读过状态应该是容易序列化的对象和类打破了这个约定。

我正在创建一个 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 将其粘贴到 state 中，以便我可以从应用程序的其余部分获取它。

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

这会破坏 React/Redux 的约定吗？解决这个问题的另一种方法是什么？使用上述方法，我可能会遇到哪些潜在问题？目前无法预见任何问题......但我对 React/Redux 也没有太多经验（约 4 个月）

编辑：

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

【问题讨论】：

为什么你的验证函数不能存在于课堂之外？我看不到让每个类都有自己的验证函数的好处，因为它们可以很容易地卸载到一组纯函数中。
我想从概念上讲，将它们组合在一起对我来说更有意义。这样模型就能够“知道”它是否有效。
回答您的问题（尽管您似乎已经知道这一点），是的，这被认为是违反惯例/最佳实践。 Redux 建议你只调度普通的 JS 对象
您的模型只需将一些数据传递给与您的类无关的验证函数即可知道它是否有效。我的建议是始终以原语来思考。如果您需要一个函数，请将其提取到某个常见的地方并忘记它。通过这种方式，您可以序列化、恢复并保持超级 DRY。进一步阅读drboolean.gitbooks.io/mostly-adequate-guide/content

标签： javascript reactjs state redux

【解决方案1】：

所以我认为我的代码可以帮助需要找到一种方法的人可以通过困难的函数来解决转换类的功能不支持原型让我的一些代码可以修复它们并且使用起来很容易

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

【讨论】：

【解决方案2】：

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

如果您确实希望在纯数据上拥有更多类似对象的外观，您可能需要查看redux-orm 之类的内容。

【讨论】：