使用store返回的dispatch方法修改数组类型页面无法自动更新

import { connect } from "react-redux";

import type { Dispatch, Store } from "../../rematchStore";

const mapStateToProps = (state: Store) => {
  console.log("state");
  return {
    count: state.count,
    immerPluginTest: state.immerPluginTest,
  };
};

const mapDispatchToProps = (dispatch: Dispatch) => {
  console.log("dispatch", dispatch.count);
  return {
    increment: dispatch.count.increment,
    incrementAsync: dispatch.count.incrementAsync,
    immerPluginTestAdd: dispatch.immerPluginTest.addItem,
  };
};


// 使用props来操作rematch
function Son(props: any) {
  console.log(props);
  const addAsync = () => {
    props.increment(1);
  };

  const add = () => {
    props.incrementAsync(1);
  };

  const addTest = () => {
    props.immerPluginTestAdd(111);
  };

  return (
    <div>
      当前值
      <h1>{props.count}</h1>
      <hr />
      <h1>{JSON.stringify(props)}</h1>
      <div className="optrations">
        <button onClick={addAsync}>同步加一</button>
        <button onClick={add}>异步加一</button>
        <button onClick={addTest}>添加值</button>
      </div>
    </div>
  );
}
export default connect(mapStateToProps, mapDispatchToProps)(Son);

import store from "../../rematchStore";

function Son1(props: any) {
  const { dispatch, getState } = store;
  const addAsync = () => {
    dispatch.count.increment(1);
  };

  const add = () => {
    dispatch.count.incrementAsync(1);
  };

  const state = getState();
  console.log(state);

  const addTest = () => {
    dispatch.immerPluginTest.addItem(111);
  };

  return (
    <div>
      当前值
      <h1>{state.count}</h1>
      <hr />
      <h1>{JSON.stringify(state)}</h1>
      <div className="optrations">
        <button onClick={addAsync}>同步加一</button>
        <button onClick={add}>异步加一</button>
        <button onClick={addTest}>添加值</button>
      </div>
    </div>
  );
}

export default Son1;

import { createModel } from "@rematch/core";
import { RootModel } from "../index";

// 默认使用
export const count = createModel<RootModel>()({
  state: 0 as number, // initial state
  reducers: {
    increment(state: any, payload: any) {
      console.log("reducers/increment", state, payload);
      return state + payload;
    },
  },
  effects: {
    async incrementAsync(payload: any, rootState: any) {
      console.log("effects/incrementAsync", payload, rootState);
      await new Promise((resolve) => setTimeout(resolve, 1000));
      //@ts-ignore
      this.increment(payload);
    },
  },
});

// 插件
export const immerPluginTest = createModel<RootModel>()({
  state: [] as number[],
  reducers: {
    addItem(state, payload: number) {
      const newState = [...state, payload];
      return newState;
    },
  },
  effects: {},
});