如何使等待成为useDispatch

Question

你能解释一下为什么等待调度没有效果吗？。默认情况下，使用调度是同步的。但是有什么方法可以使它异步化吗？

我在使用dispatch和createAsyncthunk时遇到了一个问题。我认为它会停止其他组件的渲染。我可能错了，请建议一个更好的方法来处理这个渲染问题。我认为调度仍然是同步的。

//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此时正具有您正在等待的效果。但是，由于您处于关闭状态，您的状态将不会在getList函数中更新。

你可以在你的代码中得到砰的一声的结果：

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

此外，您应该为extraReducer使用生成器表示法。我们将很快弃用您正在使用的对象表示法。