easy-peasy中useStoreState无法响应ES6类实例状态更新问题

问题现象 #

当在Easy-Peasy的store中存储ES6类实例，通过useStoreState()访问该实例时，即使修改实例的属性值，组件也不会触发重渲染。比如示例代码中，输入框修改名字后，输入框值和页面上的person信息都不会更新，尽管action已经成功派发。

原因分析 #

Easy-Peasy通过检测状态的引用变化来判断是否需要触发组件重渲染，它的状态更新机制更适配普通JavaScript对象（plain objects）：

• ES6类实例是引用类型，直接修改实例的属性时，实例本身的引用没有改变，Easy-Peasy无法感知到状态变更；
• 类实例的内部结构无法被Easy-Peasy的状态追踪系统正确识别，导致属性更新无法被检测到。

解决方案 #

1. 改用普通JavaScript对象替代ES6类实例 #

这是最推荐的方案，用普通对象或工厂函数创建状态对象，更新时返回新的对象引用：

// store.js
import { action, createStore } from "easy-peasy";

// 用工厂函数生成普通对象
const createPerson = (name, age) => ({ name, age });

const store = createStore({
  person: createPerson("Tom", "20"),
  updatePersonName: action((state, payload) => {
    // 生成新的person对象替换原状态
    state.person = { ...state.person, name: payload };
  })
});

export default store;

2. 若必须使用ES6类，更新时返回新的类实例 #

不要直接修改原实例的属性，而是创建新的类实例替换原状态，让Easy-Peasy检测到引用变化：

// 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"),
  updatePersonName: action((state, payload) => {
    // 创建新的Person实例替换原状态
    state.person = new Person(payload, state.person.age);
  })
});

export default store;

3. 精准选择需要的状态字段 #

在useStoreState()中直接返回需要的属性，而不是整个类实例，这样属性值变化时能触发重渲染：

// 在组件中
function EditPerson() {
  // 直接获取name属性，而非整个person实例
  const personName = useStoreState((state) => state.person.name);
  const updatePersonName = useStoreActions(actions => actions.updatePersonName);
  
  return (
    <input
      value={personName}
      onChange={(e) => updatePersonName(e.target.value)}
    />
  );
}

内容的提问来源于stack exchange，提问作者AnsonH