react-redux图解

by Princiya

由Princiya

如何将React连接到Redux —图解指南 (How to connect React to Redux — a diagrammatic guide)

This post is aimed at people who already know React and Redux. This will aid them in better understanding how things work under the hood.

这篇文章针对的是已经了解React和Redux的人。 这将帮助他们更好地了解引擎盖下的工作方式。

When I first got into the React universe ?, ~3 years ago, I had a very hard time understanding how Redux’s mapStateToProps and mapDispatchToProps worked and were available to the React component. Here is a diagrammatic guide to better understand how Redux’s connect works with React.

大约3年前，当我第一次进入React世界？时，我很难理解Redux的m apStateToProps和m apDispatchToProps是apDispatchToProps工作的，并且可用于React组件。 这是一个图解指南，可以更好地了解Redux的c onnect如何与React onnect工作。

Let’s say we have a Search component.

假设我们有一个Search组件。

And a classic Redux store.

和经典的Redux商店。

Let’s populate the Redux store with Action dispatchers and the Reducer state.

让我们用Action调度程序和Reducer状态填充Redux存储。

The Reducer’s defaultState looks like this. The action parameter inside the Reducer function comes from the dispatchedAction.

Reducer的defaultState如下所示。 Reducer函数内部的action参数来自调度的Action.

Let’s connect the React search component with the Redux store. The library has official React bindings for Redux.

让我们将React搜索组件与Redux存储连接起来。 库具有官方React绑定。

It provides the connect function to connect the component to the store.

它提供了connect组件连接到商店的connect功能。

mapDispatchToProps means map the Action’s dispatch function to React component’s this.props .

mapDispatchToProps意味着将Action的dispatch功能映射到React组件的this.props 。

The same applies to mapStateToProps , where the Reducer’s state is mapped to React component’s this.props .

这同样适用于mapStateToProps ，其中Reducer的状态映射到React组件的this.props 。

1. Connect React to Redux.
   将React连接到Redux。

2. The mapStateToProps and mapDispatchToProps deals with the Redux store’s state and dispatch, respectively.

   mapStateToProps和mapDispatchToProps处理Redux存储的state和dispatch 。

3. Reducer’s state and the Action’s dispatch are available via this.props to the React component.

   通过this.props ，React组件可以使用this.props的state和Action的dispatch 。

Let us summarize the entire React to Redux connect workflow via a button click from the React search component.

让我们通过单击React搜索组件中的按钮来总结整个React to Redux连接工作流程。

1. Click the submit button on the React search component

   点击submit的阵营搜索组件按钮

2. The click function dispatches an Action. The Action dispatch function is connected to the search component via mapDispatchToProps and is made available to this.props

   click函数调度一个Action。 Action dispatch功能通过mapDispatchToProps连接到搜索组件，并且可用于this.props

3. (out of scope for this post) The dispatched action is responsible to fetch data and dispatch another action to update the Reducer state

   (超出此帖子的范围)调度的操作负责fetch数据并调度另一个操作以更新Reducer状态

4. The Reducer state updates itself with the new search data available from Step 3.
   Reducer状态使用第3步中可用的新搜索数据进行更新。

5. The Reducer state is already connected to this.props in the search component via mapStateToProps

   减速状态已经连接到this.props经由搜索组件mapStateToProps

6. this.props has the latest search data and the view now re-renders to show the updated search results

   this.props具有最新的搜索数据，该视图现在重新呈现以显示更新的搜索结果

翻译自:

react-redux图解