如何使用Redux Toolkit简化Redux(2)

这个存储可以通过使用useSelector和useDispatch的redux api直接从组件中使用。请注意，您不必使用任何常量来标识操作或使用任何类型。

处理异步Redux流

为了处理异步动作，Redux Toolkit提供了一个特殊的API方法，称为createAsyncThunk，它接受一个字符串标识符和一个payload创建者回调，执行实际的异步逻辑，并返回一个Promise，该Promise将根据你返回的Promise处理相关动作的调度，以及你的reducers中可以处理的action类型。

import axios from "axios"; import { createAsyncThunk } from "@reduxjs/toolkit"; export const GetPosts = createAsyncThunk( "post/getPosts", async () => await axios.get(`${BASE_URL}/posts`) ); export const CreatePost = createAsyncThunk( "post/createPost",async (post) => await axios.post(`${BASE_URL}/post`, post) );

与传统的数据流不同，由createAsyncThunk处理的action将由分片内的extraReducers部分处理。

import { createSlice } from "@reduxjs/toolkit"; import { GetPosts, CreatePost } from "../../services"; export const initialState = { posts: [], loading: false, error: null, }; export const postSlice = createSlice({ name: "post", initialState: initialState, extraReducers: { [GetPosts.fulfilled]: (state, action) => { state.posts = action.payload.data; }, [GetPosts.rejected]: (state, action) => { state.posts = []; }, [CreatePost.fulfilled]: (state, action) => { state.posts.unshift(action.payload.data); }, }, }); export default postSlice.reducer;

请注意，在extraReducers内部，您可以处理已解决（fulfilled）和已拒绝（rejected）状态。

通过这些代码片段，您可以看到此工具包在Redux中简化代码的效果如何。我创建了一个利用Redux Toolkit的REST示例供您参考。

最后的想法

根据我的经验，当开始使用Redux时，Redux Toolkit是一个很好的选择。它简化了代码，并通过减少模板代码来帮助管理Redux状态。

最后，就像Redux一样，Redux Toolkit并非仅为React构建。我们可以将其与其他任何框架（例如Angular）一起使用。