React-Redux 是一个流行的前端框架，是 React 的扩展，它提供了一种优雅的方式来管理应用程序的状态。此外，React-Redux 的最佳实践也是许多开发人员所推崇的。在本教程中，我们将介绍 React-Redux 的基础知识和最佳实践。
React-Redux 的基础知识
Redux 状态管理
Redux 是一个 JavaScript 状态管理工具，它提供了一种可预测的状态管理方式。Redux 的核心概念有三个：store、action 和 reducer。
store
store 是一个对象，它保存了应用程序的状态。可以通过 dispatch(action) 发送一个 action (动作) 到 store 中，这会触发一个 reducer 函数来更新应用程序的状态。
action
action 描述了发生了什么，在 Redux 中，它通常是一个对象，其中至少包含一个 type 属性。可以用 action 来描述用户操作、服务端响应、网络请求、定时器等。
reducer
reducer (规约器) 接收一个 action 和当前状态，并返回一个新的状态。reducer 是纯函数，它不修改原来的状态，而是创建一个全新的状态。
我们需要将 store 描述成一个 JavaScript 对象，这个对象的属性都是函数，这个对象就是所谓的 reducer 的合集。我们可以通过 createStore() 来创建一个 Redux store，示例如下：
import { createStore } from 'redux';
import rootReducer from './reducers'; // import root reducer
const store = createStore(rootReducer);React 组件
React 是一个以组件为核心的库，每个组件都有自己的状态和属性，组件也可以是其他组件的组合。React 组件有两种：
Class 组件
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
------ -
-----
--------- -----------
------
--
-
-Functional 组件
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
-----
--------- -----------
------
--
-React-Redux
React-Redux 是 Redux 应用程序的官方 React 绑定库。它提供了一个 Provider 组件来让它的子组件访问到 Redux store，另外，还有一个 connect() 函数来将 Redux store 的状态映射到 React 组件的属性和事件中。
Provider
Provider 组件是一个高阶组件，它接收两个属性：store 和 children，store 是 Redux 的 store，children 是组件的子元素。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ --- ---- -------------------
------ ----------- ---- -------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--connect()
connect() 是一个高阶函数，它接收两个参数：mapStateToProps 和 mapDispatchToProps。
- mapStateToProps：将 Redux store 中的状态映射到 React 组件的属性中。
- mapDispatchToProps：将 Redux store 中的 dispatch 函数映射到 React 组件的事件中。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --------------- - ---- -------------
-------- --------- ------ --------------- -- -
------ -
-----
--------------
------- ----------- -- -------------------
--------
---------
------
--
-
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - -
----------------
--
------ ------- ------------------------ -----------------------------React-Redux 的最佳实践
将组件按照职责进行分层
将组件按照职责进行分层可以让代码更清晰、更易于管理。通常，我们将应用程序分为三层：
- Components 层：渲染表示层。
- Containers 层：管理组件层，它负责将 Redux store 的状态与组件连接起来。
- Reducers 层：状态管理层，它定义了如何响应各种操作。
使用 Redux Toolkit 来简化代码
Redux Toolkit 是一个官方的开箱即用的 Redux 工具包，它可以帮助我们更快地编写 Redux 代码。在使用 Redux Toolkit 时，我们可以采用更简单的方式来创建 actions、reducers 和 store。它还提供了许多 helper 来简化异步操作和处理不可变数据等任务。
在编写 reducer 时使用 immer.js 库
immer.js 是一个小巧而强大的工具库，它可以帮助我们更简单地修改不可变的状态。在 reducer 中使用它，可以让你以一种不可变的方式来修改 Redux store 中的状态。
在组件中使用 Hook
Hook 是 React 16.8 新增的功能，它可以让我们在不使用 class 组件的情况下使用 state 和其他 React 功能。使用 Hook，我们可以更轻松地将 Redux store 中的状态与组件连接起来。
使用 reselect 库进行性能优化
reselect 是一个非常有用的著名库，在 Redux store 的状态更新时可以减少计算开销，reselect 会缓存结果并在之后使用相同的参数调用时更快地返回结果。
示例代码
以下是一个简单的计数器应用程序的示例代码：
actions.js
import { createAction } from '@reduxjs/toolkit';
export const increaseCounter = createAction('counter/increase');
export const decreaseCounter = createAction('counter/decrease');reducer.js
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
------ - ---------------- --------------- - ---- -------------
----- ------------ - -
------ --
--
----- -------------- - --------------------------- --------- -- -
-------
------------------------- ------- -- -
----------- -- --
--
------------------------- ------- -- -
----------- -- --
---
---
------ ------- ---------------store.js
-- -------------------- ---- -------
------ - -------------- - ---- -------------------
------ -------------- ---- ---------------------
----- ----- - ----------------
-------- -
-------- ---------------
--
---
------ ------- ------Counter.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------------- --------------- - ---- -------------
-------- --------- -
----- ----- - ----------------- -- ---------------------
----- -------- - --------------
------ -
-----
--------------
------- ----------- -- -----------------------------
--------
---------
------- ----------- -- -----------------------------
--------
---------
------
--
-
------ ------- --------App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- -----------------------
-------- ----- -
------ -
-----
--------------- ------------
-------- --
------
--
-
------ ------- ----结论
Redux 是一个固执己见的库，但当它结合 React 使用时，可以创建出可扩展、可预测的应用程序。React-Redux 提供了一个优雅的方式来连接 React 组件和 Redux store，我们可以使用最佳实践来简化我们的代码。在学习 React-Redux 时，需要理解 Store、Actions 和 Reducers，这些都是构建 React 应用程序的基础。希望这篇教程能对您在学习和使用 React-Redux 中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6722a9352e7021665e0c9fc8