当前位置: 首页 > 工具软件 > MirrorX > 使用案例 >

react中mirror的使用

彭炳
2023-12-01

1.可以给所有的mirror就是就是你对mirror进行了分类一个分类一个仓库(不需要export
可能封装好了,内部帮我们导出了吧)
2.然后我们将其把仓库都引入到一个index.js
3.然后在入口组件直接引入./state
4.然后render

还有一个注意点,传参的时候不管我们传不传值,默认拿的是state值,假如我们要自己
传一个值,你应该后面加一个形参

然后我们在组件里面使用哪个仓库

export default connect((state) => {
return {
count: state.app,
};
})(App);

return的时候就用哪个比如state.user 表示使用叫做user的仓库的名字

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import "./state/store";
import { render } from "mirrorx";

// 参考地址:https://github.com/mirrorjs/mirror/blob/master/README_zh.md
render(<App />, document.getElementById("root"));

import "./App.css";
import { connect } from "mirrorx";

function App(props) {
  console.log(props.count);
  return (
    <div>
      <div>你好世界</div>
    </div>
  );
}

export default connect((state) => {
  return {
    count: state.app,
  };
})(App);

import mirror, { actions } from "mirrorx";
mirror.model({
  name: "app",
  initialState: { name: "张三", age: 14 },
  reducers: {
    increment(state) {
      return state;
    },
    decrement(state) {
      return state;
    },
    say(state, data) {
      console.log(state, data);
      return data;
    },
  },
  effects: {
    eat() {
      console.log("吃法");
    },
    async incrementAsync() {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 1000);
      });
      actions.app.increment();
    },
  },
});

 类似资料: