React-Redux 是一个用于 React 应用中管理状态的 JavaScript 库。它通过将应用程序的状态存储在 Redux 存储中，并将所需的状态传递给组件来实现这一目的。本文将介绍如何使用 npm 包 react-redux 来管理应用程序的状态。
安装
要安装 react-redux，可以使用以下命令：
npm install react-redux
集成到应用程序中
- 创建 Redux Store
首先，我们需要创建一个 Redux store。store 是一个单一状态树，代表了整个应用程序的状态。在应用程序中，只有一个 store。
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);- 在应用程序中集成 Provider
接下来，我们需要将我们的应用程序与 Redux store 集成起来。为此，我们需要在应用程序的顶层组件上添加一个 Provider 组件。Provider 将 store 作为属性传递给所有子组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--- 连接组件到 Redux store
现在，我们已经将 Redux store 集成到了我们的应用程序中。但是，我们还需要连接我们的组件以便它们可以访问 store 中的状态。为此，我们将使用 react-redux 库中提供的 connect 函数。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ---------------- - ---- ------------
-------- --------- ------ ---------------- -- -
------ -
-----
--------- -----------
------- ---------------------------------------------
------
--
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -
----------------
--
------ ------- ------------------------ -----------------------------在上面的代码中，我们使用了 mapStateToProps 和 mapDispatchToProps 函数来链接我们的 Count 组件到 Redux store。 mapStateToProps 将 store 中的状态映射到组件的 props 中，而 mapDispatchToProps 将 action 映射到组件的 props 中。
示例
下面是一个简单的示例，展示如何使用 react-redux 管理应用程序的状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - --------- ------- - ---- --------------
------ - ----------- - ---- --------
-- ------ -----
----- ----------------- - --------------------
-- ------ --------
------ -------- ------------------ -
------ - ----- ----------------- --
-
-- -------
-------- ----------------- - - ------ - -- ------- -
------ ------------- -
---- ------------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
-- -----
----- ----- - -------------------------
-- ---------
-------- --------- ------ ---------------- -- -
------ -
-----
--------- -----------
------- ---------------------------------------------
------
--
-
-- ------- --------- -- ----- -----
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -
----------------
--
----- ---------------- - ------------------------ -----------------------------
-- ------ -----------
----------------
--------- --------------
----------------- --
------------
-------------------------------
--在上面的示例中，我们创建了一个 Counter 组件，并通过 connect 函数将其连接到 Redux store。然后，我们在 ReactDOM.render 中使用 Provider 组件和 ConnectedCounter 组件来渲染我们的应用程序。
结论
React-Redux 是一个非常强大的 JavaScript 库，可以帮助我们管理 React 应用程序中的状态。本文介绍了如何使用 npm 包 react-redux 来管理应用程序的状态，并提供了一个简单的示例。希望这篇文章对您有所帮
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32440
