rtstore

React 中随处可用的 Store

安装

pnpm install rtstore --save

准备

全局导入，或在使用页面导入

默认内置common模块，位置：rtstore/dist/store/common

创建模块实例：

import { LADispatchType, createStore } from "rtstore";

const state = {
  authorization: "",
  userInfo: {},
};

const commonStore =
  createStore <
  any >
  {
    name: "common", //模块名
    state,
    cached: true,
    setters: [],
    reducers: {
      setAuthorization: (
        state: any,
        { action, payload }: LADispatchType<string>
      ) => {
        state.authorization = payload;
      },
      setUserInfo: (state: any, { action, payload }: LADispatchType<any>) => {
        state.userInfo = payload || {};
      },
    },
  };

export default commonStore;
export const { setAuthorization, setUserInfo } =
  commonStore.wrappedReducers || {};

然后加载模块

路径：src/store/index.js

import { defaultStore } from "rtstore";
import common from "rtstore/store/common"; //
let { store: estore, dispatch, addStore, usePicker } = defaultStore({
  elements: {
    common,
  },
});
export default estore;
export { addStore, dispatch, usePicker };

使用

import estore, { dispatch, usePicker } from "@/store";
// hookComponent中
const { userInfo } = usePicker((estore) => estore.common);

//外部
const { userInfo } = estore.common.state;

//更新值
dispatch(setUserInfo({}));

////动态新增模块
import { addStore } from "@/store";
import newModule from "./newModule";
addStore(newModule);