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 React-Redux library has official React bindings for Redux.

讓我們將React搜索組件與Redux存儲連接起來。 React-Redux庫具有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具有最新的搜索數據，該視圖現在重新呈現以顯示更新的搜索結果

翻譯自: https://www.freecodecamp.org/news/how-to-connect-react-to-redux-a-diagrammatic-guide-d2687c14750a/

react-redux圖解