Redux Toolkit - 编写 Redux 的标准方法

Redux是 JavaScript 应用程序的状态管理器。主要与 React 配合使用。大多数大型 React 应用都包含 Redux 来管理全局状态。但是所有基于 Redux 的应用程序都遵循标准方法吗？

Redux 需要以标准且最佳的方式实现，以避免 React 应用中出现问题。当我们开始开发基于 Redux 的应用时，我们往往会在寻找最佳方案时陷入决策疲劳。为了避免这种困惑，我将分享在 React 应用中实现 Redux 的标准方法，以及如何构建 React-Redux 应用。让我们开始吧！

Redux 工具包

Redux Toolkit是 Redux 官方提供的软件包，用于以标准和最小化的方式实现 Redux 逻辑。让我们快速了解一下 Redux Toolkit 解决了什么问题。

我们进入代码部分，看看这个包是如何标准化reducer的。

使用以下命令将 Redux Toolkit 添加到您的项目中



yarn add @reduxjs/toolkit

使用 redux 工具包创建 store 超级简单！查看以下代码

	import { configureStore } from '@reduxjs/toolkit'
	import counterReducer from './counterSlice'


	export const store = configureStore({
	reducer: counterReducer
	})

view raw .jsx hosted with ❤ by GitHub

configureStore默认启用 redux-thunk 和 redux dev tools。无需使用中间件手动配置。但如果您计划使用 redux-saga 或任何其他副作用管理器，您可以通过中间件进行配置，如下所示

现在你的 Redux Store 已经可以使用了。接下来，将其添加<Provider/>到

下一步设置 Reducer 吗？不！现在该切片了。

Redux Toolkit 提供了一个名为的 API createSlice。它可以处理初始状态，自动创建 action 类型和创建器。而且不再需要switch case。我们也不需要手动编写 action 类型和创建器。查看以下代码，了解新的切片 reducer。

让我们分解一下每个 createSlice 选项

initialState：切片的初始状态

name：切片的名称。（Reducer 名称）

Reducers：处理动作类型，就像我们在 Reducers 中使用的 switch case 一样。

createSlice 也有extraReducer。此选项用于处理当前切片未生成的操作类型。

现在，你可以与 Redux 存储进行交互并从 React Components 切片，如下所示

功能文件夹与 redux 工具包无关。但这也是 redux 推荐的一种构建 React Redux 应用的方式。功能文件夹的方法是将你的功能分组到单个文件夹中。

功能文件夹包含组件以及一个用于createSlice特定功能的 Redux 工具包 API 文件。Redux 相关的 Action 创建器和类型需要添加到一个文件中，而不是多个文件中。

/app整个应用程序使用的全局应用程序设置和布局配置。

/common可重复使用的助手和组件

/features与特定功能及其切片逻辑相关的组件。

Redux 工具包提供了一种便捷且标准的编写 Reducer 的方法。希望本文对您有所帮助。感谢您的阅读。

在Twitter上获取更多更新。