状态管理

kktp内置插件,是以@rematch/core包为基础进行自动收集状态管理。使用此插件需要安装@rematch/core和@rematch/loading包。

参数

1export interface ModelspluginProps {
2  /**自动生成文件目录名称*/
3  cacheDirName?: string;
4}

models ts 实例

1// src/models/demo.ts
2export interface DemoState {
3  test?: string;
4}
5
6const demo = {
7  name: 'demo',
8  state: {
9    test: '测试State',
10  },
11  reducers: {
12    updateState: (state: DemoState, payload: DemoState): DemoState => ({
13      ...state,
14      ...payload,
15    }),
16  },
17  effects: (dispatch) => {
18    const { demo } = dispatch;
19    return {
20      async verify() {
21        demo.updateState({ test: '测试22' });
22      },
23    }
24  },
25};
26export default demo;
27
28
29// src/pages/ceshi.tsx
30import { RootState, useSelector, dispatch } from '@kkt/pro';
31const Ceshi = () => {
32  // 获取demo数据
33  const store = useSelector((store: RootState) => store.demo);
34  // Dispatch
35  const dispatch = useDispatch<Dispatch>();
36
37  const click = () => {
38    dispatch({
39      type: 'demo/verify',
40      payload: {}
41    })
42  }
43  return <div />
44}
45export default Ceshi;

自动收集文件引入

1. 约定src/**/models/**/*.(js|ts)文件

kktp配置文件

1// .kktprc.ts
2export default {
3  // ...
4  initModel:true,
5}

Contributors

License

Licensed under the MIT License.