快捷導(dǎo)航

如何使用Redux Toolkit簡(jiǎn)化Redux

更新時(shí)間：2021年04月07日 09:40:04 作者：杭州程序員張張

這篇文章主要介紹了如何使用Redux Toolkit簡(jiǎn)化Redux，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下

Redux Toolkit解決的問(wèn)題

Redux Toolkit(之前稱為Redux Starter Kit)提供了一些選項(xiàng)來(lái)配置全局store，并通過(guò)盡可能地抽象Redux API來(lái)更精簡(jiǎn)地創(chuàng)建動(dòng)作和reducers。

它包括什么？

Redux Toolkit附帶了一些有用的軟件包，例如Immer，Redux-Thunk和Reselect。它使React開(kāi)發(fā)人員的工作變得更加輕松，允許他們直接更改狀態(tài)（不處理不可變性），并應(yīng)用Thunk之類的中間件（處理異步操作）。它還使用了Redux的一個(gè)簡(jiǎn)單的“選擇器”庫(kù)Reselect來(lái)簡(jiǎn)化reducer函數(shù)。

Redux Toolkit API的主要功能？

以下是Redux Took Kit使用的API函數(shù)，它是現(xiàn)有Redux API函數(shù)的抽象。這些函數(shù)并沒(méi)有改變Redux的流程，只是以更易讀和管理的方式簡(jiǎn)化了它們。

configureStore：像從Redux中創(chuàng)建原始的createStore一樣創(chuàng)建一個(gè)Redux store實(shí)例，但接受一個(gè)命名的選項(xiàng)對(duì)象并自動(dòng)設(shè)置Redux DevTools擴(kuò)展。
createAction：接受一個(gè)Action類型字符串，并返回一個(gè)使用該類型的Action創(chuàng)建函數(shù)。
createReducer：接受初始狀態(tài)值和Action類型的查找表到reducer函數(shù)，并創(chuàng)建一個(gè)處理所有Action類型的reducer。
createSlice：接受一個(gè)初始狀態(tài)和一個(gè)帶有reducer名稱和函數(shù)的查找表，并自動(dòng)生成action creator函數(shù)、action類型字符串和一個(gè)reducer函數(shù)。

您可以使用上述API簡(jiǎn)化Redux中的樣板代碼，尤其是使用createAction和createReducer方法。然而，這可以使用createSlice進(jìn)一步簡(jiǎn)化，它可以自動(dòng)生成action creator和reducer函數(shù)。

createSlice有什么特別之處？

它是一個(gè)生成存儲(chǔ)片的助手函數(shù)。它接受片的名稱、初始狀態(tài)和reducer函數(shù)來(lái)返回reducer、action類型和action creators。

首先，讓我們看看在傳統(tǒng)的React-Redux應(yīng)用程序中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;

現(xiàn)在，讓我們看看如何使用createSlice簡(jiǎn)化并實(shí)現(xiàn)相同的功能。

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;

正如你所看到的，現(xiàn)在所有的動(dòng)作和reducer都在一個(gè)簡(jiǎn)單的地方，而在傳統(tǒng)的redux應(yīng)用中，你需要在reducer中管理每一個(gè)action和它對(duì)應(yīng)的action，當(dāng)使用createSlice時(shí)，你不需要使用開(kāi)關(guān)來(lái)識(shí)別action。

當(dāng)涉及到突變狀態(tài)時(shí)，一個(gè)典型的Redux流程會(huì)拋出錯(cuò)誤，你將需要特殊的JavaScript策略，如spread operator和Object assign來(lái)克服它們。由于Redux Toolkit使用Immer，因此您不必?fù)?dān)心會(huì)改變狀態(tài)。由于slice創(chuàng)建了actions和reducers，你可以導(dǎo)出它們，并在你的組件和Store中使用它們來(lái)配置Redux，而無(wú)需為actions和reducers建立單獨(dú)的文件和目錄，如下所示。

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

這個(gè)存儲(chǔ)可以通過(guò)使用useSelector和useDispatch的redux api直接從組件中使用。請(qǐng)注意，您不必使用任何常量來(lái)標(biāo)識(shí)操作或使用任何類型。

處理異步Redux流

為了處理異步動(dòng)作，Redux Toolkit提供了一個(gè)特殊的API方法，稱為createAsyncThunk，它接受一個(gè)字符串標(biāo)識(shí)符和一個(gè)payload創(chuàng)建者回調(diào)，執(zhí)行實(shí)際的異步邏輯，并返回一個(gè)Promise，該P(yáng)romise將根據(jù)你返回的Promise處理相關(guān)動(dòng)作的調(diào)度，以及你的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)
);

與傳統(tǒng)的數(shù)據(jù)流不同，由createAsyncThunk處理的action將由分片內(nèi)的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;

請(qǐng)注意，在extraReducers內(nèi)部，您可以處理已解決（fulfilled）和已拒絕（rejected）狀態(tài)。

通過(guò)這些代碼片段，您可以看到此工具包在Redux中簡(jiǎn)化代碼的效果如何。我創(chuàng)建了一個(gè)利用Redux Toolkit的REST示例供您參考。