[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());
    }, []);