[react]redux异步处理和重写useDispatch

异步代码

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { getBanner } from '../http/request';
import store from '@/store';
export const fetchBanner = createAsyncThunk('recommend/banners',async (args, thunkAPI) => {const response = await getBanner();thunkAPI.dispatch(getBannerAction(response.data));},
);
const recommendStore = createSlice({name: 'recommend',initialState: {banners: [],},reducers: {getBannerAction(state, { payload }) {console.log('得到', payload);state.banners = payload.banners;},},
});
export const { getBannerAction } = recommendStore.actions;
export default recommendStore.reducer;

外面调用的是

  dispatch(fetchBanner());

但是ts会报错

类型“AsyncThunkAction<any, void, AsyncThunkConfig>”的参数不能赋给类型“UnknownAction”的参数。ts

这时候来到总仓库 把  dispatch改装一下

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

 或者

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

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

    useEffect(() => {dispatch(fetchBanner());}, []);