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.

這篇文章針對的是已經(jīng)了解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.

假設(shè)我們有一個Search組件。

And a classic Redux store.

和經(jīng)典的Redux商店。

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

讓我們用Action調(diào)度程序和Reducer狀態(tài)填充Redux存儲。

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

Reducer的defaultState如下所示。 Reducer函數(shù)內(nèi)部的action參數(shù)來自調(diào)度的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的狀態(tài)映射到React組件的this.props 。

Connect React to Redux.

將React連接到Redux。

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

mapStateToProps和mapDispatchToProps處理Redux存儲的state和dispatch 。

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搜索組件中的按鈕來總結(jié)整個React to Redux連接工作流程。

Click the submit button on the React search component

點擊submit的陣營搜索組件按鈕

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函數(shù)調(diào)度一個Action。 Action dispatch功能通過mapDispatchToProps連接到搜索組件，并且可用于this.props

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

(超出此帖子的范圍)調(diào)度的操作負責fetch數(shù)據(jù)并調(diào)度另一個操作以更新Reducer狀態(tài)

The Reducer state updates itself with the new search data available from Step 3.

Reducer狀態(tài)使用第3步中可用的新搜索數(shù)據(jù)進行更新。

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

減速狀態(tài)已經(jīng)連接到this.props經(jīng)由搜索組件mapStateToProps

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

this.props具有最新的搜索數(shù)據(jù)，該視圖現(xiàn)在重新呈現(xiàn)以顯示更新的搜索結(jié)果

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

react-redux圖解

總結(jié)

以上是生活随笔為你收集整理的react-redux图解_如何将React连接到Redux —图解指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。