ice3 使用状态管理

1.安装插件：npm i @ice/plugin-store -D

2.在 ice.config.mts 中添加插件

import { defineConfig } from '@ice/app';
import store from '@ice/plugin-store';

export default defineConfig(() => ({
  plugins: [
    store(),
  ],
}));

3.在page文件夹的同级创建models文件夹 例如 src/models/app.ts

import { createModel } from 'ice';

interface ModelState {
  menuList: any[]; // 菜单列表
 }

export default createModel({
   state: {
    menuList: []
  }as ModelState,
 reducers: {
    setMenuList(prevState: ModelState, payload) {
      prevState.menuList = payload;
    },
 },

// 定义处理该 model 副作用的函数
  effects: (dispatch) => ({
    // 更新组织列表
    async updateOrgList() {
      //getOrgData是调的接口
      const result = await getOrgData();
      this.setMenuList(result);
      return result;
    },
  }),
})

 

4.初始化 Store

src/store.ts

import { createStore } from 'ice';
import user from '@/models/user';
import app from '@/models/app';
import init from '@/models/init';

export default createStore({
  user,
  app,
  init,
});

5.在组件中使用

import { useEffect } from 'react';
import store from '@/store';

export default function Home() {
 const [appState, appDispatcher] = store.useModel('app');

useEffect(() => {
  // 触发 dispatcher 获取数据并修改 state
   appDispatcher.setMenuList([1,2,3])
 }, [])
  return (
    <>
     <span>{appState[0]}</span>
     <span>{appState[2]}</span>
    </>
  );
}