在使用React进行前端开发时，我们常常需要使用状态管理库，这种库能够帮助我们更好地管理页面的状态，避免了因为页面状态过于复杂而导致的代码混乱的情况。Redux 是一款非常出色的状态管理库之一，它凭借着简单的设计和优秀的性能易用性受到了开发者们的青睐。本文将详细介绍如何在React中使用Redux并连接组件。
安装
在介绍React-Redux之前，首先我们需要安装Redux：
npm install redux --save
接着安装React-Redux：
npm install react-redux --save
安装成功后，请确保你当前的项目中已经 import 了 React、react-dom 及 react-redux，示例如下：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';Redux
在实现React-Redux组件连接之前，需要先了解一些Redux中的基础知识。Redux 中的三个核心概念：Store、Action、Reducer，其中，
- Store: Redux 存储 state 的地方，一个应用只有一个 Store
- Action: 描述发生的事件，State 的变化必须由 Action 引起
- Reducer: 状态的处理函数，接受旧的 state 和 action，返回新的 state
React-Redux
在学习完Redux的基础知识之后，我们开始介绍应用程序连接React和Redux的关键库：React-Redux。
简单来说，React-Redux充当了连接React和Redux之间的桥梁，它提供了两个重要的APIs: connect() 和 Provider。
connect()
通常情况下，组件需要连接Redux Store，以便访问和更新底层 Store 中的状态。这就是 connect() 函数的作用，它用于将一个React组件连接到 Redux Store 中，并从中读取所需的数据。
connect([mapStateToProps], [mapDispatchToProps]) 是一个 高阶函数（Higher Order Function），它接受两个参数：mapStateToProps 和 mapDispatchToProps。
mapStateToProps：将当前组建所需要获取的 state 从 Store 中提取出来，并通过 props 绑定到当前组建中；mapDispatchToProps：将所需的关于 Store 的 action，以 props 的方式绑定到当前组建中。
为了便于在示例中理解，我们首先创建一个简单的 counterReducer，它负责管理一个数字并最后将其显示在页面上。
-- -------------------- ---- -------
-- --------------------------
----- ------------ - -
-------- -
--
----- -------------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------------
------ -
---------
-------- ------------- - -
-
---- --------------------
------ -
---------
-------- ------------- - -
-
--------
------ -----
-
-
------ ------- ---------------initialState：相当于 Store 中该Reducer的初始化 state；counterReducer：为该 Counter 组件服务的 Reducer。
我们还需要创建一个 Store 并将CounterReducer连接到Store中：
// store/index.js
import { createStore } from 'redux';
import counterReducer from '../reducers/counterReducer';
const store = createStore(counterReducer);
export default store;接下来，我们就可以开始连接React组件了。
首先，在我们的 Counter 组件中，需引入 connect()方法，并设置好 mapStateToProps() 和 mapDispatchToProps() 方法。
-- -------------------- ---- -------
-- ---------------------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- - ------- -- -
----- - -------- ----------------- ---------------- - - ------
------ -
-----
------------ --------------
------- -------------------------------------
------- -------------------------------------
------
-
-
----- --------------- - ------- -- -
------ -
-------- ----------------------------
-
-
----- ------------------ - ---------- -- -
------ -
----------------- -- -- ---------- ----- ------------------- ---
----------------- -- -- ---------- ----- ------------------- --
-
-
------ ------- ------------------------ -----------------------------现在， connect() 函数实现了以下操作：
- 将
mapStateToProps()函数返回的counter从 Store 中提取出来并传递给 Counter 组件。 - 将
mapDispatchToProps()函数返回的两个函数incrementCounter和decrementCounter通过 props 的方式绑定到 Counter 组件中。
Provider
Provider 是 React-Redux 提供的另一个重要 API，它的主要作用是允许我们将应用程序中所有的组件连接到一个单一的 Store 之上。
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ ------- ---- -----------------------
----------------
--------- --------------
-------- --
------------
-------------------------------
--在该例子中，我们将一个名为store的 Store 通过 Provider 组件传递给了应用程序
最终成功渲染出形如下方组件的 Counter。
总结
通过 connect() 方法的使用，我们可以在 React 中访问和更新 Store 中的状态，而通过 Provider 组件的使用，则是将整个应用程序链接到一个公共的 Store 上。
Redux 十分强大，也十分容易懂，Redux 的应用场景只要涉及到多层级数据共享，就可以使用Redux。
前端开发中的 Redux 应用场景并不断增多，Redux 的大热也越来越令人信服。本文仅仅简单介绍了在 React 中使用 Redux 的基本操作，相信读者可以借此奠定更深厚的基础。将 Redux 应用于React 开发中，非常值得一试！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cca5c45ad90b6d042a39a0