React-Redux 是 React.js 应用程序的状态管理库，其运行机理主要是通过将 应用程序分割成容器组件和展示组件，将容器组件连接到应用程序的 Redux store 当中，以便于组件获取并更新 store 中所存储的应用程序状态。本文将详细讲解 React-Redux 的运行机理，包括如何配置 Redux 架构、如何创建 redux store、如何在 React 组件中使用 Redux store、其中需要注意和掌握的技术要点。
配置 Redux 架构
首先，在应用程序中添加 Redux 的依赖库。通过 npm 或 yarn 安装 redux 和 react-redux 库：
npm install redux react-redux --save
接下来，在您的应用程序代码的顶层目录中，创建一个名为 store 的新目录，并在该目录中定义一个名为 index.js 的新文件。该文件就是 Redux store 的核心入口点。您还需要在该目录中创建一个名为 reducers.js 的文件，以用于定义应用程序的初始状态。在 index.js 中，您需要导入 redux 库的 createStore 方法和自己定义的 reducers:
import { createStore } from 'redux'
import { reducers } from './reducers'
const store = createStore(reducers)其中，reducers.js 文件需要导出一个 reducer 函数，它用于处理所有来自 action 的状态更新请求。一个简单的 reducer 如下：
-- -------------------- ---- -------
------ -------- -------------- - --- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - -
---- ------------
------ - --------- ------ ----------- - - -
--------
------ -----
-
-创建 Redux Store
在上一步的代码中，你已经创建了一个基本的 Redux store，该 store 将初始状态定义为一个空对象。但是，您还需要注册 Redux store 中间件，以便于在 action 被调用时，能够使用 React-Redux 管理 Redux store 的状态更新。在 index.js 中，导入 Provider 组件和 React 库，然后使用 Provider 组件将 store 与顶层应用程序组件相连接，并将组件绑定到页面 DOM 中。以下是示例代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ - -------- - ---- -------------
------ - ------------ --------------- - ---- -------
------ - -------- - ---- ------------
----- ----- - --------------------- -----------------------
----------------
--------- --------------
---- --
------------
--------------------------------
-在上面的代码中，您不仅需要将 store 传递给 Provider 组件，还需要在创建 store 时将 applyMiddleware 中间件传递给其第二个参数。在示例代码中，thunk 是一个用于处理异步 action 的流行中间件。
在 React 组件中使用 Redux Store
现在，您已经建立了一个可以管理应用程序状态的 Redux store，就可以在您的 React 组件中使用它了。最先启发我们，当一个被 connected 的组件（即容器组件）被渲染时，React-Redux 会自动将 Redux store 的状态注入到组件的 props 中，让您可以轻松地访问和更新应用程序状态。以下是一个例子：
-- -------------------- ---- -------
------ - ------- - ---- -------------
----- ------- ------- --------------- -
-------- -
----- - ---------- ---------- ----- - - ----------
------ -
-----
----------------
------- ------------------------------
------- ------------------------------
------
-
-
-
----- --------------- - ------- -- -
------ -
------ ------------
-
-
----- ------------------ - ---------- -- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
-
-
------ ------- ------------------------ ----------------------------在上述示例代码中，我们定义一个名为 counter 的组件，并使用 connect 方法将其与 Redux store 相连接。mapStateToProps 函数将 store 中的状态映射到组件的 props 中，而 mapDispatchToProps 函数将 dispatch 函数绑定到组件的 props 中，让您可以随时 dispatch 一个 action 到 Redux store。最后，我们将被 connected 的组件导出，以便其他组件可以使用它。
总结
本文中，我们已经详细讲解了 React-Redux 的运行机理，包括如何配置 Redux 架构、如何创建 redux store、如何在 React 组件中使用 Redux store，你还掌握了一些需要注意和掌握的技术要点。在正式使用 React-Redux 开发应用程序时，我们建议您继续学习相关知识，以便于可以使用更高阶的应用程序开发技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64622a79968c7c53b0379a11