2016-04-14 66 views
45

我目前正在學習React,並試圖找出如何將其與Redux一起用於構建移動應用程序。我對這兩者如何相關/可用在一起感到困惑。例如,我在React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript中完成了本教程,但現在我想要在該應用程序中添加一些減法器/操作,並且我不確定那些將與我已經完成的操作配合使用。什麼時候應該將Redux添加到React應用程序?

回答

102

React是一個UI框架,負責更新UI以響應通常被某個組件描述爲「擁有」的狀態的「真相源」。 Thinking in React非常好地描述了React國家所有權概念,我強烈建議你仔細閱讀它。

此狀態所有權模型在狀態爲層次結構並且或多或少與組件結構匹配時運行良好。通過這種方式,狀態可以跨多個組件「分散」,並且該應用程序很容易理解。

但是,有時應用程序的遙遠部分想要訪問相同的狀態,例如,如果緩存提取的數據並希望在同一時間持續更新它。在這種情況下,如果遵循React模型,最終會在組件樹的頂部添加一大堆非常大的組件,這些組件會通過一些不使用它們的中間組件傳遞大量道具,達到實際上關心這些數據的幾個葉子組件。

當您發現自己處於這種情況時,您可以使用Redux從頂層組件中「提取」這種狀態管理邏輯,將其分解爲稱爲「reducer」的單獨函數,以及「連接「直接關注該狀態的葉子組件,而不是通過整個應用傳遞道具。如果你還沒有這個問題,你可能不需要Redux。

最後,請注意,Redux不是該問題的明確解決方案。還有許多其他方式可以在React組件外管理本地狀態 - 例如,一些不喜歡Redux的人對MobX感到滿意。我建議你首先對React狀態模型有一個明確的理解,然後獨立評估不同的解決方案,然後用它們構建小型應用程序來了解它們的優缺點。

(此答案由皮特·亨特的react-howto引導啓發,我建議你讀它。)

25

我發現,添加終極版到應用程序/堆棧理想的路徑是要等到之後,你/應用/團隊感受到了它所解決的痛苦。一旦你開始看到長長的鏈條props建立和通過多層次的組件或你發現自己編排複雜的狀態操作/讀取,這可能表明你的應用程序可能受益於引入Redux等人。

我建議您使用已經用「React」構建的應用程序,看看Redux如何適合它。看看你是否可以一次拔出一個狀態或一組「行爲」來優雅地介紹它。重構它,而不會因爲你的應用程序的大爆炸而重寫。如果您在查看可能增加價值的位置時仍遇到問題,那麼這可能表示您的應用程序不夠大或不夠複雜,無法在React之上獲得類似Redux的功能。

如果你還沒有碰到它,丹(上面的回答)有一個很棒的短視頻系列,從更基本的層面穿過Redux。我強烈建議花一些時間吸收它的部分:https://egghead.io/series/getting-started-with-redux

Redux也有一些相當不錯的文檔。特別解釋了很多「爲什麼」,如http://redux.js.org/docs/introduction/ThreePrinciples.html

+3

我完全同意你的看法。 Redux爲您的應用程序添加了許多樣板文件。對於中小型應用程序,Redux通常不是必需的。對於非常大的應用程序,你會發現自己層疊的道具經過了很多層次,以至於難以管理。那是Redux進來的時候。 –

+1

雖然Dan的回答很好,但這個更好,imo! – Buzinas

1

首先,如果您不需要它,您不需要將Redux添加到您的應用程序!簡單,所以如果你根本不需要它,不要強迫自己把它包含在你的項目中!但這並不意味着Redux不好,它在大型應用程序中非常有用,所以請繼續閱讀...

Redux是您的React應用程序的狀態管理,想想Redux就像本地商店那樣跟蹤您的狀態當你走了,你可以訪問任何頁面和路線你想要的狀態,也比較通量,你只有一個商店,意味着一個真相的來源...

看看這個圖像,瞭解什麼Redux先做一目瞭然:

enter image description here

而且這是如何Redux的我ntroduce本身:

終極版是JavaScript的應用程序可預測的狀態容器。

它可以幫助你寫的行爲一致的應用程序,在 不同的環境(客戶端,服務器和本地)運行,並且很容易 測試。最重要的是,它提供了極好的開發者體驗,例如 作爲實時代碼編輯與時間旅行調試器相結合。

您可以將Redux與React一起使用,或與任何其他視圖庫一起使用。 它很小(2kB,包括依賴關係)。

而且按照文件以外,還有爲Redux如下三個原則:

1.單一數據源

2.國家是隻讀的

3.使用純功能進行更改

因此,基本上,當你需要一個單店來跟蹤任何你在你的應用程序一樣,那麼終極版是很方便的,你可以在任何地方訪問它在你的應用程序,在任何航線......簡單地使用store.getState();

而且使用中間件Redux,你可以更好地管理狀態,在Redux的官方頁面上有方便的組件和中間件列表!

簡單地說,如果你的應用程序會很大,有很多組件,狀態和路由嘗試從開始實現Redux!它會在途中幫助你!

0

當我們編寫應用程序時,我們需要管理應用程序的狀態。 如果我們需要共享組件之間的狀態,我們可以使用道具或回調,React在組件內本地管理狀態。

但隨着應用程序的增長,變得很難管理狀態和狀態轉換。爲了調試應用程序,需要正確跟蹤狀態和狀態轉換。

終極版是爲JavaScript應用程式可預測的狀態的容器,其管理狀態和狀態轉換,並且通常與用於做出反應,

終極版的概念可以在以下圖像進行說明。

Redux

當用戶在用戶與該組件進行交互和動作被調度到存儲然後在商店中的減速器接受動作,並更新該應用程序的狀態,並且存儲在應用廣泛不可改變觸發一個動作全局變量,當存儲更新時,訂閱該狀態的相應視圖組件將被更新。

由於狀態是全局管理的,並且使用redux,所以維護起來更容易。

相關問題