React 是一个使用简便且高效的前端框架，但对于一些需要实时修改的数据，React 的自身渲染方式会存在性能特别低下的问题。而 Redux 则是一个优秀的状态管理工具，与 React 搭配使用可以实现页面的局部渲染，提高渲染效率。下面，本文将介绍如何使用 React-Redux 实现页面局部渲染。
Redux 状态管理
状态
状态是应用中存储数据的唯一渠道。您应该与所有组件保持状态同步。状态是以一种结构化的方式进行组织的，即存储在一个状态容器（state container）中。Redux 实际上是将整个应用程序状态放在全局存储中，在任何组件中都可以直接访问。
动作
动作是用于描述发生在应用程序状态上的事情的纯 JavaScript 对象。每个动作都必须具有一个 type 属性，该属性描述该动作的类型。动作是将相关数据传递到应用程序状态中的一种机制。
例如：
{
type: "EDIT_USER",
userID: 1234,
userName: "John Doe"
}调度程序
调度程序（Reducers）是一个纯函数，它接收先前的状态和动作，并返回一个新状态。Redux 调度程序应该总是返回一个新的状态对象。Redux 调度程序返回的新状态对象总是与之前的 state 对象不同，即使在状态树中的某些子树保持不变的情况下也是如此。
例如：
-- -------------------- ---- -------
-------- ------------------ ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------------- -- -
-- ----- --- -------------- -
------ -
-----
----- ---------------
-
-
------ -
--
-
--------
------ -----
-
-存储
状态由 Redux 存储管理，Redux 的 Store 可以看作应用状态的源头。Store 是由调度程序（Reducers）管理的纯函数，它提供了：
- getState()：用于返回当前 Redux 数据库状态的快照。
- dispatch(action)：用于触发跟新状态的动作。
- subscribe(listener)：用于注册监听器。监听器将在状态出现更改时被调用。
例如：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
- ----- ----- ---------
- ----- ----- -------
- ----- ----- ----------
--
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
------ ----------------- -- -
-- ----- --- -------------- -
------ -
-----
----- ---------------
-
-
------ -
--
-
--------
------ -----
-
-
----- ----- - -------------------------React-Redux 页面局部渲染
React-Redux 将 React 与 Redux 状态管理库相结合，将 Redux 状态存储容器中的状态注入到 React 项目的组件层次结构中。这意味着组件可以轻松访问应用程序状态，而无需单独传递状态/属性。Redux 的 Store 仍然是应用状态的定义，但connect()函数提供了一种机制，使特定组件可以访问 Store 的状态，并自动订阅状态更改。
connect()函数
connect()函数是React-Redux提供的一个高阶函数，用来将组件和 Redux 关联起来。其接受三个参数：
- mapStateToProps(state, [ownProps]): 该函数用于将 Redux Store 中的状态映射到组件的 props（属性）上。
- mapDispatchToProps(dispatch, [ownProps]): 该函数应该返回需要注入到组件的回调函数，通常是触发自定义动作的方式。
- mergeProps(stateProps, dispatchProps, ownProps): 可选项，该函数接受前两个参数，将其合并，并返回最终更新组件的所有属性集。
例如：
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- ------------- ------ -------- -- -
------ -
----
--------------- -- -
--- --------------
-----------
------- ----------- -- ----------------- ---- ---------------------
-----
---
-----
-
-
----- --------------- - ----- -- -
------ - ------ ----------- -
-
----- ------------------ - -------- -- -
------ -
--------- -------- --------- --
--------------- ------------ ------- ----------
-
-
------ ------- ------------------------ ---------------------------------Provider 组件
Provider 组件是一个顶级组件，用于接收 Redux Store 实例，并将其作为 React 应用程序的上下文传递下去。这使得在应用程序中的任何位置，使用 connect() 方法的组件都可以访问 Redux Store。
例如：
-- -------------------- ---- -------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ ----------- ---- -------------------------
------ ----------- ---- ---------------------------
----- ----- - -------------------------
----------------
--------- --------------
------------ --
------------
-------------------------------
-示例代码
下面是一个使用 React-Redux 实现的简单的购物车示例：
reducers/cartReducer.js
-- -------------------- ---- -------
----- ------------ - -
--------- -
- ----- ----- -------- --- ------ --- ------ - --
- ----- ----- -------- --- ------ --- ------ - --
- ----- ----- -------- --- ------ --- ------ - -
--
----- --
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- --------------
----- ------------ - ---------------------- -- ----- --- ------------------
----- ------- - ----------------
----- ---------------- - --------------------- -- ----------- --- -----------------
-- ------------------ -
---------------------- -- --
- ---- -
-------------- ---------------- ------ - --
-
------ -
---------
----- -------
-
---- -------------------
----- --------------- - ---------------------- -- ----- --- ------------------
----- ----------------- - ------------------------ -- ----------- --- --------------------
----- -------- - ----------------
-- ------------------------ --- -- -
---------------------------------------------------- --
- ---- -
----------------------- -- --
-
------ -
---------
----- --------
--
--------
------ ------
-
-
------ ------- ------------components/ProductList.js
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- ------------- --------- --------- -- -
------ -
----
--------------------- -- -
--- -----------------
--------------- ------------------ --
------- ----------- -- -------------------------- -- -------------
-----
---
-----
-
-
----- --------------- - ----- -- -
------ - --------- -------------- -
-
----- ------------------ - -------- -- -
------ -
---------- --------- --
---------- ----- -------------- --------- --
-
-
------ ------- ------------------------ ---------------------------------components/Cart.js
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- ------ ----- -------------- -- -
------ -
-----
--------------
----
-------------- -- -
--- --------------
------------ ------------- - -------------- --
------- ----------- -- ------------------------------- ------------
-----
---
-----
---------- --------------------- ------------ -- ----- - ----------------- - ------------------ --------
------
-
-
----- --------------- - ----- -- -
------ - ----- ---------- -
-
----- ------------------ - -------- -- -
------ -
--------------- --------- --
--------------- ------------------- -----------
-
-
------ ------- ------------------------ --------------------------index.js
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- -------------------------
------ ----------- ---- ---------------------------
------ ---- ---- --------------------
----- ----- - -------------------------
----------------
--------- --------------
-----
------------ --
----- --
------
------------
-------------------------------
--总结
本文介绍了如何使用 React-Redux 实现页面的局部渲染。首先讲了经典 Redux 模式的状态管理过程，其中有状态、动作、调度程序和存储等四种元素，而 React-Redux 将 React 和 Redux 结合起来，将 Redux 中储存的状态注入到 React 项目的组件层次结构中，connect() 和 Provider 组件使通过状态的传递更加方便与高效。最后，通过实例讲了如何使用 React-Redux 实现购物车的加减等功能，以便读者深刻理解，欢迎移步实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ee15e968c7c53b010e6f2