[go: up one dir, main page]

Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
XY0987 opened this issue May 9, 2024 · 1 comment

Comments

@XY0987
Copy link
XY0987 commented May 9, 2024

使用props来实现页面可以自动更新

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);

使用store返回的dispatch基本数据类型可以自动更新,数组无法自动更新

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;

models详细内容

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: {},
});

以上操作,在Son1组件中,调用immerPluginTest 的addItem方法,Son组件中视图更新了,但是Son1并未更新,数据已经改变并且并非是引用地址的问题

@hacker0limbo
Copy link

@XY0987 Probably you would better to use English rather than Chinese to state your problem? Chat GPT might help you do the translate stuff. Use english will definitely benefit others when they are trying to search similar problem related with your issue, also Rematch contributors and collaborators are able to understand your confusion directly so that they don't need extra translation step. (建议你下次还是用英文来问一个 issue, 毕竟 Github 还是以英语为主, 包括 rematch 的维护者和作者都不是中国人. 你用英文提问有助于其他开发能快速通过英文搜索到相关的问题, 毕竟他们不会中文....觉得自己英文不太好可以用 gpt 辅助你翻译, 还是不自信的话, 可以最后加上一局说自己英文不好请见谅, 我觉得会友好很多....)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants