如何使 make await as useDispatch

Question

你能解释一下为什么await on dispatch没有效果吗？使用dispatch默认是同步的。但是有什么办法让它异步吗？

我在使用 dispatch 时遇到一个问题，createAsyncthunk.I 认为它会停止其他组件的渲染。我可能是错的，请提出一个更好的方法来处理这个渲染问题。我觉得dispatch还是同步的。

//API services

    const getPersonLists = async (query) => {
        return await axios.get(`${endPoint}/person?page=${query.page}&perPage=${query.perPage}`);
    };
    
    const fetchPeronWithAsyncThunk = createAsyncThunk('userSlice/userList', async (query) => await getPersonLists(query));

//Slice

    const userSlice = createSlice({
        name: 'userSlice',
        initialState: {
            users: [],
            loading: false,
        },
        extraReducers: {
            [fetchPeronWithAsyncThunk.pending]: (state) => {
                state.loading = true;
            },
            [fetchPeronWithAsyncThunk.rejected]: (state) => {
                state.loading = false;
            },
            [fetchPeronWithAsyncThunk.fulfilled]: (state, action) => {
                state.loading = false;
                state.users = action.payload;
            },
        },
    });

//Component

 

    const MyComponent = () => {
        const { users } = useUserList(); //selector
        const dispatch = useDispatch();
    
        const getList = async () => {
            //await has no effect
            await dispatch(fetchPeronWithAsyncThunk({ page: 1, perPage: 10 }));
        };
        return (
            <div>
                <button onClick={getList}>Fetch user</button>
                <div>{users.length && users.map((user, index) => <div key={index}>{user?.name}</div>)}</div>
            </div>
        );
    };

Answer 1

await 在这一点上正是您正在等待的效果。但是由于您处于 closure 中，您的状态将不会在 getList 函数中更新。

虽然您可以在代码中获得 thunk 的结果：

const result = await dispatch(fetchPeronWithAsyncThunk({ page: 1, perPage: 10 })).unwrap();

此外，您应该使用 builder notation for extraReducers。我们将很快弃用您正在使用的对象表示法。

如何使 make await as useDispatch

How make make await as useDispatch

async-await

react-redux

redux-thunk

redux-toolkit

dispatch-async