React 与 Redux 结合使用？简单！ - #explianLikeIm5

（原文发表于olenadrugalya.blog）
在我之前关于Redux的文章——#explianMeLikeIm5中，我尝试用最简单的方式解释Redux的基础知识。本文将继续探讨Redux，但重点在于如何将Redux与React结合使用。

React是一个用于创建丰富用户界面的 JavaScript 库。它由组件构成，这些组件可能拥有可变数据——状态。随着应用程序的增长和组件的增加，大量的状态管理将变得困难。这时，Redux 就派上了用场。通常，在 React Redux 应用中，你会创建一个 Redux store 来管理整个应用的状态。你的 React 组件只需订阅 store 中与其功能相关的数据即可。然后，你可以直接从 React 组件分发 action，这些 action 会触发 store 的更新。

如何在 React 中使用 Redux？
首先 需要将react-reduxRedux 包导入到你的项目中。它提供了一种将 Redux 传递state给dispatchReact 组件的方法props。

理论就讲到这里，让我们开始实践吧。

入门指南
下面我们有一个类组件，它包含 ` <input>` constructor、` <message> state` 和两个方法。它会在页面上渲染 `<message>` heading、input` <message>`button和`<message>` list。当用户输入文本时，该文本会被添加到状态输入框（` <input>handleChange() `）。当用户按下提交按钮时，该文本会被添加到状态消息框（`<message>` ），并显示在页面上（`<message> submitMessage()`）。就这么简单。

步骤 1
现在我们需要将状态以及所有与状态相关的逻辑移到 Redux store 中。组件唯一需要做的就是渲染页面上的 DOM 元素和消息。
以下是我们的 Redux store 实现：

步骤 2：
下一步是让 React 能够访问 Redux store 以及分发更新所需的 action。React Redux 提供了react-redux一个包来帮助完成这些任务。React
Redux 提供了一个包含两个关键特性的小型 API：` Provider`Provider和connect`Display`。`Provider`是React Redux 的一个包装组件。它允许在整个组件中访问 Redux store 并分发函数。它接受两个 props：

• Redux 商店
• 您的应用

为应用程序组件定义提供程序可能如下所示：
<Provider store={store}>
<App/>
</Provider>

因此，对于我们的 DisplayMessage 组件，我们可以这样编写 Provider：

步骤 3
为了使Provider正常工作，我们需要精确地指定我们需要什么state。action这样可以确保每个组件只能访问它需要的状态。我们通过创建两个函数来实现这一点：

• mapStateToProps()和
• mapDispatchToProps()

mapStateToProps()函数正如其名，它将 Redux 状态的一部分连接到 React 组件的 props：

`mapDispatchToProps() ` 函数的作用类似，但它是针对 Action 的——它将 Redux Action 连接到 React 的 props。这样，连接的 React 组件就可以向 store 发送消息了：

这看起来好像有很多事情要做，但一旦你了解了其中的原理，就会发现其实并没有那么复杂 :)

步骤 4
现在我们已经准备好将 React 组件连接到 Redux store。为此，我们使用connectreact-redux 中的方法。

`Connect()`方法接受两个可选参数：`DisplayMessage`mapStateToProps()和 `Redux store` mapDispatchToProps()。它们是可选的，因为有些组件可能只需要访问`DisplayMessage`state而不需要访问 ` Redux store`，反之亦然。如果省略其中一个函数，则需要将 ` DisplayMessage`作为参数传递。 因此，要将我们的 `DisplayMessage` 组件连接到 Redux store，我们可以这样编写该方法：dispatchactionsnull
connect

大功告成！恭喜！你现在已经学会了 React Redux :)

如果你喜欢我的博客，可以请我喝咖啡哦！ :)