简介
Redux是基于JavaScript的状态容器，它被设计用于管理应用程序中的所有状态，不仅局限于React应用程序，也可以用于其他的JavaScript应用程序。Redux主要用于解决React应用程序状态管理的问题，使得数据变得更加可控，提供更高效、更安全、更可靠的数据处理方式。Redux在应用程序的发展过程中，可以随时间进行保存，使得应用程序的状态变得可追溯。Redux的开发团队对它有如下这样的一种定义：Redux是JavaScript应用程序的预测状态容器。
Redux工作原理
Redux的工作原理主要涉及到3个部分：Store、Action和Reducer。下面我们会详细讲解每个部分的作用。
Store
Store是Redux中的某个状态容器，存储着应用程序中所有的状态。Redux的Store管理者应用程序中所有的状态，它通过Action来更新应用程序中的状态。如果状态发生改变，Store会更新应用程序中的状态，并将新的状态传递到Redux中的每一个组件，并反应到应用程序中。
Action
Action是Redux中的一种标准化行为，它会传递给Redux中的Reducer函数，Reducer会根据Action来更新应用程序中的状态。Action本身字符串类型，包含着一个操作行为和携带的数据。如果Action需要携带参数，可以将参数封装在一个对象中，作为Action的负载直接传递给Reducer函数。
Reducer
Reducer是Redux中的一个函数，根据Action来更新应用程序中的状态。Reducer是一个纯函数，输入为应用程序中当前的状态和一个Action，输出为一个新的应用程序状态。因为Reducer是纯函数，它不会修改原有状态，每次调用Reducer的时候都会返回一个全新的状态。因为Redux中的每一个组件都共享这个全局状态，所以我们需要保证Reducer的输出总是稳定的和可预测的。
Redux核心概念
Redux是一个包含了多个概念和组件的状态容器，下面我们重点介绍几个核心概念。
Action
Redux中的Action可以被理解为一个事件，在UI中用户触发Action，然后Redux Store监听Action并对其进行处理，最终更新UI到用户的页面上。Action必须包含一个type字段，表示Action所要执行的行为，同时还可以包含一些附加信息来补充Action的内容。Action的创建方式如下：
-- -------------------- ---- -------
----- ----- - --------
-------- --------------------- --------- -
------ -
----- ------
---------
--------
-
-Reducer
Redux中的Reducer是用来处理Action中传入数据的函数，Reducer处理Action后会更新应用程序中的状态，因为它是纯函数，所以产生的新的状态必须是全新的对象。Reducer的工作是让Redux Store持续监听Action并且根据Action更新应用程序中的状态。
-- -------------------- ---- -------
----- ------------ - -
--------- ---
--------- --
-
-------- ------------------ - ------------- ------- -
------ ------------- -
---- --------
------ -
--------- -- ---- ---- ----- --- ------- ----- --- ----
--------- ----------------
--------- ---------------
-
-
-Store
Redux中的Store持有整个应用程序中的状态，它可以保证在整个应用程序中都是呈现最新的数据。每次应用程序状态更新后，Store也会相应地更新状态。我们可以通过createStore方法创建一个Redux Store：
import { createStore } from "redux";
const store = createStore(loginReducer);Provider
当React应用程序中需要使用Redux数据时，我们需要使用Provider来包裹React component，这意味着所有被包裹的component都可以从Redux Store中访问到数据。
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- -------------
------ --- ---- --------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--Redux和React的结合使用
将Redux和React结合使用，我们需要使用React-Redux库，它是Redux官方前端框架React的一个插件，该插件提供了名为connect的函数，可以很方便地访问Redux Store中的数据，并将数据注入到React组件中。下面是个例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- --------- ------- --------- -
------------------- -
-----------------------
----- -------- - -------------------------
----- -------- - -------------------------
-------------------------------- ----------
-
-------- -
------ -
----- ----------- -- ----------------------
------ ----------- -------------- --
------ ----------- -------------- --
----------------------
-------
--
-
-
----- --------------- - ----- -- -
------ -
--------- ---------------
--------- --------------
-
-
----- ------------------ - -------- -- -
------ -
------------ ---------- --------- -- -
------------------------------ -----------
-
-
-
--------- - ------------------------ ------------------------------
------ ------- ----------上面的代码中，我们使用connect函数创建LoginForm组件，并从Redux Store中获取username和password状态，并使用loginAction更新状态。同时，在LoginForm组件的render方法中，可以使用这些状态。
结论
本文介绍了Redux的基础概念和原理，以及如何使用Redux构建React应用程序。Redux使React应用程序中的数据更加可控，同时也更加可预测和稳定，提供了一个强大的状态管理框架。在开发React应用程序时，结合使用Redux，我们能够提高应用程序的性能和可扩展性，更好地满足需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6738dde5317fbffedf13a9f1