什么是 Redux？
Redux 是一种状态管理库，用于管理数据的流动。
它的主要作用是将应用程序的当前状态存储在一个单一的状态树中，并使状态更改成为可预测的、可测试的和可组合的。这样做的好处是，它使得在不同组件之间共享数据变得更加容易。
Redux 的核心概念
Redux 的核心概念包括：store、action 和 reducer。
- store：应用程序状态的单一存储容器。
- action：描述状态改变的普通对象。
- reducer：在响应 action 时更新状态的函数。
如何使用 Redux？
使用 Redux 的基本流程是：
- 创建 store
- 创建 action
- 创建 reducer
- 使用 getState 获取状态值
- 使用 dispatch 发送 action，更新状态
创建 Store
创建 Redux 应用程序的第一步是使用 createStore 函数创建一个存储容器。createStore 接受一个 reducer 作为参数，并返回一个 store 对象。
------ - ----------- - ---- --------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ - --------- ----- -------------- --
--------
------ ------
-
--
----- ----- - ---------------------创建 Action
action 是一个纯对象，它描述了一次状态更改，包含一个 type 和一个 payload 属性。
----- ------------- - ------ -- -- ----- ----------- -------- ---- ---
创建 Reducer
reducer 是一个纯函数，它接受两个参数，一个是当前状态，一个是 action，返回值是新的状态。
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ - --------- ----- -------------- --
--------
------ ------
-
--获取状态
使用 getState 来获取当前状态。
-----------------
发送 Action
使用 dispatch 发送 action，更新状态。
-------------------------------------
Redux 的中间件
Redux 的中间件是一个处理 action 的函数，它可以在 action 被 dispatch 到 reducer 之前拦截它、修改它或者增强它。
Thunk
Thunk 是一个处理异步 action 的中间件。它是一个基于 promises 的库，用于编写异步 action。使用它可以将 action 的 creator 作为参数传递给 dispatch，这样就可以发起异步请求并更新 state 了。
------ ----- ---- --------------
------ - ------------ --------------- - ---- --------
----- --------- - -- -- -------- -- -
---------- ----- ------------------ --
------ ---------------------
--------- -- -----------
---------- -- -
----------
----- ---------------------
-------- ----
--
--
------------ -- -
----------
----- -------------------
-------- -----
--
--
-
----- ------- - ------ - --- ------- -- ---
----- ----- - ------------
--------
----------------------
--
-----------------------------Logger
Logger 用于在控制台中记录每个 action 被 dispatch 的详细信息。这可以使调试变得更加简单。
------ - ------------ - ---- --------------- ----- ------ - --------------- ----- ----- - ------------ -------- ----------------------- --
Redux 的优缺点
优点
- 简化了应用程序状态管理
- 使状态更加可预测、可测试和可组合
- 可以在不同组件之间共享数据
- 支持中间件扩展和自定义
缺点
- 带来了更多的复杂性
- 可能会增加开发时间
- 有时需要加入一些额外的代码才能让异步操作得到正确的处理
结论
Redux 是现代 Web 应用程序开发中必不可少的一个工具，它的设计使得管理应用程序状态变得更加容易。通过熟练掌握 Redux 的核心概念和中间件，可以更好地管理复杂的应用程序状态，提高开发效率，加速开发进程。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67380dc0317fbffedf0def2e