广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何使用Redux Toolkit简化Redux
  • 474

0
分享到

如何使用Redux Toolkit简化Redux

2024-04-02 19:04:59 474人浏览 八月长安
摘要

目录Redux Toolkit解决的问题它包括什么？Redux Toolkit api的主要功能？createSlice有什么特别之处？处理异步Redux流最后的想法了解Redux

了解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的文档找到更多信息。

谢谢您的阅读！

以上就是如何使用Redux Toolkit简化Redux的详细内容，更多关于使用Redux Toolkit简化Redux的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何使用Redux Toolkit简化Redux

本文链接: https://www.lsjlt.com/news/122983.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何使用Redux Toolkit简化Redux
    目录Redux Toolkit解决的问题它包括什么？Redux Toolkit API的主要功能？createSlice有什么特别之处？处理异步Redux流最后的想法了解Redux ...
    99+
    2022-11-12
  • 如何使用ReduxToolkit简化Redux
    目录一、安装Redux Toolkit和React-Redux二、创建Redux Store三、在React中使用Redux Store四、创建一个Redux State Slice...
    99+
    2022-12-22
    Redux Toolkit Redux Toolkit原理
  • Redux Toolkit的基本使用示例详解(Redux工具包)
    目录Redux工具包的使用Redux Toolkit介绍Redux Toolkit基本使用Redux工具包的使用 Redux Toolkit介绍 Redux Toolkit 是官方推...
    99+
    2022-12-22
    Redux Toolkit使用 Redux 工具包
  • ReactNative状态管理redux-toolkit如何使用
    今天小编给大家分享一下ReactNative状态管理redux-toolkit如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解...
    99+
    2023-07-05
  • React immer与Redux Toolkit使用教程详解
    目录1. immer1.1 setState结合immer使用1.2 useState结合immer使用1.3 immer和redux集合2. Redux Toolkit1. immer概述：它和immutable相似的，实现了操作对象的数...
    99+
    2022-10-21
  • 一文详解ReactNative状态管理redux-toolkit使用
    目录正文React 和 Redux-Toolkit 创建 Todo List App新建一个React应用创建一个 tod...
    99+
    2023-03-10
    ReactNative状态管理redux-toolkit ReactNative 状态管理 redux-toolkit
  • 如何使用react-redux
    本文小编为大家详细介绍“如何使用react-redux”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何使用react-redux”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。...
    99+
    2022-10-19
  • Redux Hooks如何使用
    这篇文章主要介绍“Redux Hooks如何使用”，在日常操作中，相信很多人在Redux Hooks如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Redux Hooks如何使用”的疑惑有所帮助！接下来...
    99+
    2023-07-04
  • React中如何使用Redux
    这篇文章主要讲解了“React中如何使用Redux”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“React中如何使用Redux”吧！Redux 是一种状态容器 JS 库，提供可预测的状态管理...
    99+
    2023-07-02
  • React/Redux应用如何使用Async/Await
    小编给大家分享一下React/Redux应用如何使用Async/Await，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Asyn...
    99+
    2022-10-19
  • 如何在React中直接使用Redux
    React中使用Redux 开始之前需要强调一下，redux和react没有直接的关系，你完全可以在React, Angular, Ember, jQuery, or vanilla...
    99+
    2022-11-13
    React使用Redux React Redux用法
  • 在小程序里如何使用Redux
    这篇文章主要介绍在小程序里如何使用Redux，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！在小程序里使用 Redux 进行状态管理， Redux 是一个前端状态管理的容器，对于...
    99+
    2023-06-26
  • 在React-Native中如何持久化redux数据
    这篇文章主要为大家展示了“在React-Native中如何持久化redux数据”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“在React-Native中如何持久...
    99+
    2022-10-19
  • react-redux集中式状态管理及基本使用与优化
    目录1、react-redux2、连接容器组件与UI组件3、react-redux基本使用优化1、简写mapState和mapDispatch两个映射方法优化2、Provider组件...
    99+
    2022-11-13
  • 如何使用React + Redux + React-router构建可扩展的前端应用
    这篇文章将为大家详细讲解有关如何使用React + Redux + React-router构建可扩展的前端应用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解...
    99+
    2022-10-19
  • 如何使用Silverlight Toolkit中Rating等级控件
    本篇内容主要讲解“如何使用Silverlight Toolkit中Rating等级控件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用Silverlight Toolkit中Rating等...
    99+
    2023-06-18
  • mysql中如何使用percona-toolkit性能类工具
    小编给大家分享一下mysql中如何使用percona-toolkit性能类工具，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ ...
    99+
    2022-10-18
  • 如何使用ES6简化代码
    小编给大家分享一下如何使用ES6简化代码，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！使用 ES6 简化代码ES6 已经发展很多年了，兼容性也已经很好了。恰当地使...
    99+
    2023-06-27
  • WPF中如何使用CallerMemberName简化InotifyPropertyChanged
    这篇文章主要介绍“WPF中如何使用CallerMemberName简化InotifyPropertyChanged”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“WPF中如何使用CallerMembe...
    99+
    2023-07-02
  • 如何使用jQuery简化Ajax开发
    这篇文章主要为大家展示了“如何使用jQuery简化Ajax开发”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用jQuery简化Ajax开发”这篇文章吧。j...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作