IT评测·应用市场-qidao123.com

标题: [react]redux异步处理和重写useDispatch [打印本页]

---

作者: 飞不高    时间: 2024-12-23 14:02
标题: [react]redux异步处理和重写useDispatch
异步代码

1. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
2. import { getBanner } from '../http/request';
3. import store from '@/store';
4. export const fetchBanner = createAsyncThunk(
5.     'recommend/banners',
6.     async (args, thunkAPI) => {
7.         const response = await getBanner();
9.         thunkAPI.dispatch(getBannerAction(response.data));
10.     },
11. );
12. const recommendStore = createSlice({
13.     name: 'recommend',
14.     initialState: {
15.         banners: [],
16.     },
17.     reducers: {
18.         getBannerAction(state, { payload }) {
19.             console.log('得到', payload);
21.             state.banners = payload.banners;
22.         },
23.     },
24. });
25. export const { getBannerAction } = recommendStore.actions;
26. export default recommendStore.reducer;

复制代码

外面调用的是

1.   dispatch(fetchBanner());

复制代码

但是ts会报错
   类型“AsyncThunkAction<any, void, AsyncThunkConfig>”的参数不能赋给类型“UnknownAction”的参数。ts
  这时间来到总仓库 把  dispatch改装一下

1. // dispatch
2. export type AppDispatch = typeof store.dispatch;
3. export const useAppDispatch = () => useDispatch<AppDispatch>();

复制代码

 或者

1. type AppDispatch = typeof store.dispatch;
2. export const useAppDispatch: () => AppDispatch = useDispatch;

复制代码

外面就可以用了,ts不会报错了

1.     useEffect(() => {
2.         dispatch(fetchBanner());
3.     }, []);

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4