react-redux入门_React — 4个步骤的Redux工作流程—入门指南

react-redux入门

Lukas在Pexels.com上的照片

Redux允许您通过单向流程管理应用程序的状态，在该流程中，子组件子组件可以直接从redux存储访问状态，而无需从父组件获取状态更改。

我假设您具有React的基本知识，并且了解Redux的用途。 事不宜迟，让我们直接开始行动。

这是理想的react-redux应用程序项目结构。

以下是React应用的典型工作流程 。 我们将更详细地执行以下每个步骤。

React-Redux分4个步骤-中等：@ heypb，Insta：h3ypb

让我们看看这种流动将如何发生。

1.用户与前端组件进行交互。 道具用于调用启动动作的函数。 动作是使用props启动的，因为它们被映射到称为mapActionsToProps的对象中的props（或者可以称为任何对象），该对象告诉react app应使用哪些props来发起动作。

2.一个动作通常包含一个类型（或标识符）和有效载荷（或数据）。 它还可以执行诸如从API提取数据之类的任务。 下面的代码显示了操作的外观。

actions / printHelloAction.js

3.分派动作后，减速器会收到该动作。 减速器的工作是返回更改后的状态。 根据操作的类型，减速器可能会返回组件的更改状态。

reducers / pringHelloWorldReducer.js

react应用程序的所有reducer合并为一个reducer，并将其作为参数传递给redux存储。

reducers / index.js

Redux存储在根组件中提供给react应用。

src / index.js

4.更改后的状态再次用于显示更新的组件。 状态在mapStateToProps函数中映射到组件的props。 该功能中定义的道具可以相应地用于更新组件。

因此，更详细的流程可能如下所示：

React-还原流

如果您想遍历代码以了解它们如何组合在一起，可以在此处找到上述代码示例的Gitub。

在react-redux-中工作时，请记住某些事项

1. 减速器必须是纯函数。 给定任何输入，输出必须始终相同。
2. 该州整个应用程序都存储在一个对象树上的一个内商店 。
3. 状态为只读。 更改状态的唯一方法是发出一个动作 ，一个描述发生了什么的对象。
4. 状态更改是通过纯函数（reduce）进行的。

希望您已经了解了基本的react-redux应用程序工作流程。

干杯! 快乐的一天！

随时在LinkedIn和Instagram上添加我！

如果您想继续前进，可能需要了解许多重要的概念，请参考以下链接

uanders / react-redux-cheatsheet
在工作流程和概念上对Redux备忘单做出React。 通过创建一个 github.com 来为uanders / react-redux-cheatsheet开发做出贡献

为什么在Redux中我们需要中间件来实现异步流？
根据文档，“没有中间件，Redux存储仅支持同步数据流”。 我不明白为什么… stackoverflow.com

外观和容器组件
您会发现您的组件更容易重用，并考虑将它们分为两类。 medium.com

为什么在Redux中我们需要中间件来实现异步流？
根据文档，“没有中间件，Redux存储仅支持同步数据流”。 我不明白为什么… stackoverflow.com

翻译自: https://hackernoon.com/https-medium-com-heypb-react-redux-workflow-in-4-steps-beginner-friendly-guide-4aea9d56f5bd

react-redux入门