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

Storing objects with prototype functions in Redux state

本文关键字：原型 函数 对象 Redux 状态 存储      更新时间：2023-09-26
在该

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

我正在创建一个 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    
  }
}

通过发出以下操作创建器将对象添加到存储区：

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

适当的人员减速器将其粘入状态，以便我可以从应用程序的其余部分获得它。

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

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

编辑：

我

应该补充一点，我只通过化简器改变对象状态。我小心翼翼地不改变应用程序中其他地方的状态。

是的，它通常被认为是一种反模式，因为它破坏了执行时间旅行调试等操作的能力（Redux的核心卖点之一）。 有关更多详细信息，请参阅 Redux 常见问题解答。

如果你确实想在你的纯数据上有更多的类似对象的外观，你可能想研究类似redux-orm的东西。

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

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
相关文章：