React-Redux 是 React.js 应用程序中最常用的状态管理库之一，它可以使得我们更好地管理大型应用的状态和数据流，从而使得开发和维护变得更加方便和高效。本篇文章旨在总结 React-Redux 的使用和常见问题，供大家学习、参考和使用。
为什么使用 React-Redux？
React-Redux 提供了一种 Flux 类型的架构，可以使得我们更有条理地构建前端应用程序。它具有许多优点，例如：
- 帮助我们更好地管理我们的状态，使得我们的组件具有更好的独立性和可复用性；
- 允许我们轻松地实现时间旅行、调试等高级功能；
- 为我们提供了方便的中间件机制，可以轻松地集成其他工具和库；
安装和配置
要使用 React-Redux，我们需要先安装它：
npm install react-redux
然后，在我们应用程序中，我们需要使用 Provider 组件将 store 传递给我们的应用程序：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----------- ---- -------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--这里的 rootReducer 是我们的 reducer 函数，可以使用 combineReducer 将多个 reducer 合并成一个。
连接组件
在 React-Redux 中，我们把组件分成两类：展示组件和容器组件。展示组件（也叫做 dumb 组件）仅仅呈现 UI，没有自己的状态，也没有跟 Redux 直接相连，可以直接从父组件接收数据和 props。容器组件（也叫做 smart 组件）则主要连接 Store 和展示组件，它的作用是从 Store 中获取数据并将其以 props 的形式传递给展示组件。
-- -------------------- ---- ------- ------ - ------- - ---- -------------- ------ ----------- ---- ---------------- ------ - ---------- - ---- ------------ ----- --------------- - ----- -- -- ----- ----------- --- ----- ------------------ - -------- -- -- ----------- ------ -- --------------------------- --- ------ ------- ------------------------ --------------------------------
在上面的代码中，我们使用了 connect() 函数来创建一个高阶组件，它将 MyComponent 连接到 Redux，将其中的 state 和 dispatch 以 props 的形式传递给组件。
Actions 和 Reducers
在 React-Redux 应用程序中，我们使用 actions 和 reducers 来管理应用程序的状态。Actions 是我们应用程序中的事件，它们描述了应用程序中发生什么事情。Reducers 则是纯函数，根据 actions 和当前状态返回一个新的状态。它们是处理应用程序数据的中心位置。
-- -------------------- ---- -------
-- ----------
------ ----- ----------- - --------------
------ -------- ---------------- -
------ - ----- ------------ ---- --
-
-- -----------
------ - ----------- - ---- ------------
----- ------------ - -
----- ---
--
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
---------
----- ------------
--
--------
------ ------
-
-在上面的代码中，我们定义了一个 updateData 的 action 和 rootReducer 来处理 UPDATE_DATA。
组件中的使用
在组件中使用 Redux 数据可以非常方便（这里以简单的任务列表为例）：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ------- --------------- -
-------- -
----- - ----- - - -----------
------ -
-----
--------------- -- -
---- --------------
---------------------
-------------------------
------
---
------
--
-
-
------ ------- ---------在主要的入口文件（例如 App.js）中定义这个组件，并在 mapStateToProps 中将它连接到 Redux。
总结
React-Redux 代码比较多，但是可以更好地组织和管理状态。在不同的项目中，也可以使用一些辅助函数和工具，例如 Redux-thunk、Reselect 等来加以扩展。在实际项目中，这些细节和技巧也需要结合具体的需求来使用。希望这篇文章对大家使用 React-Redux 工具有所启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c9b2905ad90b6d0417d6c5