理解Redux Toolkit，这是用于高效Redux开发的通过验证的工具集。在本文中，你将看到为什么Redux Toolkit值得React社区更多的关注。

React和Redux被认为是大规模React利用中治理状态的最佳组合。然而，随着工夫的推移，Redux的受欢迎水平降落，起因是：

  • 配置Redux Store并不简略。
  • 咱们须要几个软件包来使Redux与React一起工作。
  • Redux须要太多样板代码。

带着这些问题，Redux的创建者Dan Abramov发表了名为《你可能不须要Redux》的文章，倡议人们只在须要的时候应用Redux，而在开发不那么简单的利用时，要遵循其余办法。

Redux Toolkit解决的问题

Redux Toolkit(之前称为Redux Starter Kit)提供了一些选项来配置全局store，并通过尽可能地形象Redux API来更精简地创立动作和reducers。

它包含什么？

Redux Toolkit附带了一些有用的软件包，例如Immer，Redux-Thunk和Reselect。它使React开发人员的工作变得更加轻松，容许他们间接更改状态（不解决不可变性），并利用Thunk之类的中间件（解决异步操作）。它还应用了Redux的一个简略的“选择器”库Reselect来简化reducer函数。

Redux Toolkit API的次要性能？

以下是Redux Took Kit应用的API函数，它是现有Redux API函数的形象。这些函数并没有扭转Redux的流程，只是以更易读和治理的形式简化了它们。

  • configureStore：像从Redux中创立原始的createStore一样创立一个Redux store实例，但承受一个命名的选项对象并主动设置Redux DevTools扩大。
  • createAction：承受一个Action类型字符串，并返回一个应用该类型的Action创立函数。
  • createReducer：承受初始状态值和Action类型的查找表到reducer函数，并创立一个解决所有Action类型的reducer。
  • createSlice：承受一个初始状态和一个带有reducer名称和函数的查找表，并主动生成action creator函数、action类型字符串和一个reducer函数。

您能够应用上述API简化Redux中的样板代码，尤其是应用createAction和createReducer办法。然而，这能够应用createSlice进一步简化，它能够主动生成action creator和reducer函数。

createSlice有什么特别之处？

它是一个生成存储片的助手函数。它承受片的名称、初始状态和reducer函数来返回reducer、action类型和action creators。

首先，让咱们看看在传统的React-Redux应用程序中reducers和actions的样子。

Actions

import {GET_USERS,CREATE_USER,DELETE_USER} from "../constant/constants";export const GetUsers = (data) => (dispatch) => { dispatch({  type: GET_USERS,  payload: data, });};export const CreateUser = (data) => (dispatch) => { dispatch({  type: CREATE_USER,  payload: data, });};export const DeleteUser = (data) => (dispatch) => { dispatch({  type: DELETE_USER,  payload: data, });};

Reducers

import {GET_USERS,CREATE_USER,DELETE_USER} from "../constant/constants";const initialState = { errorMessage: "", loading: false, users:[]};const UserReducer = (state = initialState, { payload }) => {switch (type) { case GET_USERS:  return { ...state, users: payload, loading: false };case CREATE_USER:  return { ...state, users: [payload,...state.users], loading: false };case DELETE_USER:  return { ...state,   users: state.users.filter((user) => user.id !== payload.id),, loading: false };default:  return state; }};export default UserReducer;

当初，让咱们看看如何应用createSlice简化并实现雷同的性能。

import { createSlice } from '@reduxjs/toolkit';export const initialState = {  users: [],  loading: false,  error: false,};const userSlice = createSlice({  name: 'user',  initialState,  reducers: {    getUser: (state, action) => {      state.users = action.payload;      state.loading = true;      state.error = false;    },    createUser: (state, action) => {      state.users.unshift(action.payload);      state.loading = false;    },    deleteUser: (state, action) => {      state.users.filter((user) => user.id !== action.payload.id);      state.loading = false;    },  },});export const { createUser, deleteUser, getUser } = userSlice.actions;export default userSlice.reducer;

正如你所看到的，当初所有的动作和reducer都在一个简略的中央，而在传统的redux利用中，你须要在reducer中治理每一个action和它对应的action，当应用createSlice时，你不须要应用开关来辨认action。

当波及到渐变状态时，一个典型的Redux流程会抛出谬误，你将须要非凡的JavaScript策略，如spread operator和Object assign来克服它们。因为Redux Toolkit应用Immer，因而您不用放心会扭转状态。因为slice创立了actions和reducers，你能够导出它们，并在你的组件和Store中应用它们来配置Redux，而无需为actions和reducers建设独自的文件和目录，如下所示。

import { configureStore } from "@reduxjs/toolkit";import userSlice from "./features/user/userSlice";export default configureStore({ reducer: {  user: userSlice, },});

这个存储能够通过应用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）一起应用。

您能够通过参考Redux Toolkit的文档找到更多信息。

谢谢您的浏览！