React-Redux 是一个让 React 应用中使用可预测的数据流的库，它使得管理应用程序的状态变得更加容易。它是一个基于 Redux 的拓展库，因此我们需要首先理解 Redux。
Redux 和 React 数据流
在理解 Redux 和 React 之间的关系之前，我们需要先了解 React 中的单向数据流。
在 React 中，数据是从父组件向子组件流动的，子组件通常使用属性（props）来接收从父组件中传递的数据。然而，在大型应用程序中，组件几乎总是作为一个复杂的层次结构进行嵌套，数据的传递变得复杂而难以管理。实际上，更改数据的方式和传递方式经常因为一些边缘情况而弄错，从而导致不必要的 Bug 和错误。
Redux 提供了一种更加清晰和简单的数据流模式，这种模式在许多应用程序中被广泛使用。Redux 是一个单向数据流框架，其数据流非常明确且可预测，它保证了数据的流动方向始终是一致的。
Redux 的三个核心概念
Redux 基于三个核心概念：store、action 和 reducer。
store: Redux 应用程序中保存数据的唯一地方。它不是一个普通的 JavaScript 对象， 也不是 Component，但类似于一个数据仓库，用于保存应用程序的状态或数据。
action: 在 Redux 中，action 是一个表示更改数据的简单对象，它通常包括一个文字类型和一些有效载荷数据。Action 可以通过 dispatch() 方法调用来触发器，从而通知 Redux 数据库的 Store 对象更新数据。
reducer: Reducer 实际上是一个纯函数，用于将旧的状态和 action 连接在一起，并返回新的状态。Reducers 是 Redux 应用程序的重要部分， RootState 可以通过 Redux 提供的 combineReducers() 方法来组合多个reducer。
为 React 应用程序添加 Redux
下面我们将演示如何使用 Redux 来构建一个简单的 React 应用程序。在这个应用程序中，我们将能够跟踪一个书籍清单的状态，用户可以添加新书籍，删除已有的书籍等。
安装 React-Redux 库：
npm install react-redux
创建一个新应用程序，创建一个 BooksList 的组件，在其中显示应用程序的当前状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- --------- ------- --------------- -
-------- -
------ -
-----
----
---------------------------- ------ -- -
--- -------------------------------
---
-----
------
--
-
-
----- --------------- - ------- -- -
------ -
------ -----------
--
--
------ ------- ------------------------------------我们通过连接 React 的 connect() 函数实现将状态存储到组件属性中的关键部分。connect() 接收两个参数：mapStateToProps 和 mapDispatchToProps。其中 mapStateToProps 函数用于将 store 中的 state 映射到组件的 props，而 mapDispatchToProps 与组件的事件传递相关。
接下来，我们需要创建一个 reducer，来在应用程序中管理我们的书籍状态。
-- -------------------- ---- -------
----- ------------ - -
------ -
- --- -- ------ ---- ---- -- --- ------ --
- --- -- ------ ---- ------- --
- --- -- ------ ------ ------ --- --- ----- -- -------- -
-
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ - --------- ------ ---------------- --------------- --
---- --------------
------ - --------- ------ ------------------------- -- ------- --- --------------- --
--------
------ ------
-
--
------ ------- ------------在我们的 reducer 中，我们定义了两个操作 ADD_BOOK 和 REMOVE_BOOK，。每个操作都会在我们的应用程序中触发不同的 action。例如，当 ADD_BOOK 操作被触发时，我们会将新书籍添加到状态中。
最后，我们需要配置 store 以便支持这些操作。使用下面的代码即可实现：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;接下来，我们需要在 index.js 中导入应用程序的 store：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ -------- ---- ------------
------ ----- ---- ----------
------ --------- ---- -------------------------
----------------
--------- --------------
---------- --
------------
--------------------------------
--现在，我们的简单的书籍应用程序已经准备就绪。用户可以轻松地添加和删除书籍，并且 Redux 状态库将更新我们的应用程序，以便反映新的状态变化。
总结
学习 React-Redux 可以有效地提高开发大型 React 应用程序的效率，因为它可以为应用程序提供清晰和容易管理的数据流方案。在实际开发中，我们需要深入了解 Redux 的核心概念：store、action 和 reducer，并应用它们来构建应用程序的状态变化。本文中提供的示例应用程序可以作为您日后开发应用程序时的参考。
完整代码示例：https://github.com/shaoxy/react-redux-tutorial。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652334c495b1f8cacdaa33cf