1. redu 简介
redu 是一个基于 Flux 架构的状态管理库，用于构建 React 应用程序。在 Redux 中，应用程序的状态存储在一个单一的状态树中，通过一个不可变的方式来进行修改。这个状态树可以在 Redux 的应用程序中方便地使用，并且可以通过很多功能强大的工具来管理。
2. redu 安装
在使用 redu 之前，需要先安装 redu 包。可以通过 npm 来进行安装，具体方法如下：
--- ------- ----- ------
其中，“ --save ”选项将 redu 包添加到项目的简介文件“package.json”中，并自动安装依赖。
3. redu 的三大原则
了解 redu 的三大原则能够有效地提升应用程序的性能和可维护性。这三个原则如下：
单一状态源：整个应用程序的状态被存储在单一的 JavaScript 对象中（也被称为状态树）。这个状态树便是 Redux 应用程序中的全部状态。
只读的状态：状态树是不能直接被修改的。任何修改状态的操作都会返回一个新的状态对象，而不会改变原有的状态。
纯函数修改状态：为了改变状态，需要编写纯函数（也被称为 reducer）。这些函数处理旧的状态和 action，并返回一个新的状态，而不是修改原有的状态。
4. 使用 redu
在应用程序中使用 redu，需要先创建一个 reducer，之后通过 createStore() 方法创建一个 store 并将 reducer 作为参数传入。
------ - ----------- - ---- --------
-- -- -------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ ---------- - ----- ----------- ---
--------
------ ------
-
--
-- -- -----
----- ----- - ---------------------5. Redux 的核心概念
5.1 Action
Action 是在 Redux 应用程序中描述发生了什么的普通对象。Action 会将数据传递到应用程序中，Redux 应用程序中 getState() 方法能够获取到这些数据。
下面是一个 Action 的示例：
-
----- -----------
----- ------ -----
-5.2 Reducer
在 Redux 中，reducer 是一个纯函数，用来修改应用程序的状态，根据规则每个 reducer 负责管理一个状态树上的一部分。
在 reducer 内部接收到的 action 是未经修改的（也就是在发送 action 之后），reducer 会针对不同的 action 类型执行不同的操作，并返回一个新的状态对象。
下面是一个简单的 reducer 示例：
----- ------------ - - ------ - --
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ----------------------
------ - ------ ----------- - - --
---- ----------------------
------ - ------ ----------- - - --
--------
------ ------
-
-5.3 Store
在 Redux 应用程序中，与所有的状态交互都是通过 store 来完成的。store 是一个包含了应用程序状态（状态树）的对象，它还包含 dispatch()、subscribe() 和 getState() 方法。
6. 统一的 reducer
当应用程序变得很复杂，就需要借助 combineReducer() 方法将多个 reducer 组合成一个统一的 reducer。combineReducer() 方法接收一个对象作为参数，该对象表示应用程序状态树的不同部分。
------ - --------------- - ---- -------- ----- -------- - ----------------- --------- --------- -------- --- ----- ----- - ----------------------
在这个示例中，reducers 指一个包含 reducer1、reducer2 和 reducer3 的对象。
7. 在 React 中使用 redu
在 React 应用程序中，通过 react-redux 包来集成 redu 和应用程序。使用 Provider 组件将 store 传递给应用程序，并使用 connect 函数将组件连接到 Redux 数据库进行渲染。
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- --------
------ ------- ---- -------------
----- ----- - ---------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--使用 connect() 函数将组件连接到 Redux，可以定义 mapStateToProps() 和 mapDispatchToProps() 函数以连接你的组件。
示例代码：
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- ------------
----- -------- ------- --------------- -
-------- -
------ -
-----
----
---------------------------- -- -
--- ------------------------------
---
-----
------ ----------- ----------- --
------- ----------- -- -----------------------------------------------------
--- ----
---------
------
--
-
-
----- --------------- - ------- -- -
------ -
------ ------------
--
--
------ ------- -----------------------------------8. 总结
在本篇文章中，我们学习了 redu 状态管理库的一些基本概念，包括使用 reducer 管理状态，统一 reducer 管理应用程序，以及在 React 应用程序中集成 redu。希望这篇文章能帮助你将 redu 应用于你的前端应用程序，并提升你的开发效率和程序质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005600d81e8991b448dde0e