如何利用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）一起利用。