当前位置：首页 > news >正文

icejs状态管理store使用

news 2025/9/30 7:29:26

src/models/user.ts

import { createModel } from 'ice';interface User {name: string;id: string;
}export default createModel({// 定义  model 的初始 statestate: {name: '',id: '',} as User,// 定义改变该 model 状态的纯函数reducers: {update(state, payload) {return {...state,...payload,};},},// 定义处理该 model 副作用的函数effects: (dispatch) => ({async getUserInfo() {this.update({name: 'taobao',id: '123',});},}),
})

src/store.ts

import { createStore } from 'ice';
import user from './models/user';export default createStore({ user });

在组件中使用：

import { useEffect } from 'react';
import store from '@/store';export default function Home() {const [userState, userDispatchers] = store.useModel('user');
// 这里跟官方的不太一样，有个坑useEffect(() => {const getUserInfo = async () => {await userDispatchers.getUserInfo()console.log(userState) //在这里第一次是拿不到数据的，经测试，从其他路由再返回过来，第二次才有数据。或者代码热更新时。}getUserInfo()}, [])// 操作userState数据需要在useEffect内// 添加一个监听useEffect(() => {console.log('userState已更新:', userState)}, [userState])return (<><span>{userState.id}</span><span>{userState.name}</span></>);
}

里面还有个坑，代码热更新store时就会报错，刷新后又正常了。还不知道什么原因。
在这里插入图片描述