useStoreState不使用ES6类实例

Question

在平易近中，当我们使用钩子访问存储ES6类实例的存储字段时，useStoreState()钩子不会导致重呈现。例如：

store.js

import { action, createStore } from "easy-peasy";

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const store = createStore({
  person: new Person("Tom", "20"),  // <-- Stores ES6 class instance
  updatePersonName: action((state, payload) => {
    state.person.name = payload;
  })
});

export default store;

app.jsx

import "./styles.css";
import { useStoreActions, useStoreState } from "easy-peasy";
import React from "react";

export default function App() {
  const person = useStoreState((state) => state.person);
  return (
    <div className="App">
      <p>{JSON.stringify(person)}</p>
      <EditPerson />
    </div>
  );
}

function EditPerson() {
  const person = useStoreState((state) => state.person);
  const updatePersonName = useStoreActions(
    (actions) => actions.updatePersonName
  );
  return (
    <input
      value={person.name}
      onChange={(e) => updatePersonName(e.target.value)}
    />
  );
}

​

​

如果我们尝试键入输入框，即使成功地分派了updatePersonName操作(请参阅下面的屏幕快照)，输入框的值仍然保持不变。person存储状态未被成功更新，useStoreState()钩子也不会导致重呈现。

​

​

Answer 1

原因

按[医]Redux氏文档的说法，简单农民是Redux的抽象。

强烈建议您只将普通可序列化的对象、数组和原语放到您的存储中。从技术上讲，可以在存储中插入不可序列化的项，但这样做会破坏保持和重新补充存储内容的能力，并干扰时间迁移调试。

由于ES6类实例不被认为是可序列化的对象，所以由于我们使用的是意外的数据类型，所以很容易遇到问题。

解决方案

将ES6类转换为普通的JavaScript对象：

store.js

import { action, createStore } from "easy-peasy";

const store = createStore({
  // Use a plain JS object here 
  person: {
    name: "Tom",
    age: "20",
  },
  updatePersonName: action((state, payload) => {
    state.person.name = payload;
  })
});

export default store;

备注

根据简易农学博士，有一个名为easy-peasy-decorators的社区扩展，它提供了通过类和装饰器生成商店的能力。

不幸的是，在2022年11月，该库不支持不支持支持v4或更高版本(如本期中所暗示的)。