2016-05-10 50 views
3

我目前正在學習與redux的反應,並知道不變性是這些技術的關鍵組成部分,但我一直在努力完全理解如何實現它。React Redux不變性備忘單

因此我不知道是否有用於反應/ Redux的不變性那裏任何作弊表?

如果不是,那麼在您的reactx應用程序中實現不變性的首選方法是什麼?

回答

2

就其本質而言,Redux應用程序狀態已經是不可變的。 Redux破壞你的應用程序狀態,並在你每次啓動一個動作(觸發一個重構狀態的reducer)時重建一個全新的應用程序狀態。所以沒有使得Redux能夠不可變的工作原理,因爲它已經做到了。

您可能會感到困惑,因爲有庫處理不可變結構,如Immutable.js,並且有將這些庫合併到Redux中的軟件包,例如redux-immutable。雖然使用Immutable.js意味着您的各個狀態段被保存爲不可變結構,但這並不是必需的,因爲您的應用程序狀態的基本性質在存在或不存在庫時已經是不可變的,這使得您的應用程序狀態不可變。在Redux中使用Immutable.js對於快速比較從狀態傳遞來的道具以查看它們是否發生了變化,以便可以繞過重新渲染而非常有用。

+0

這是你提到的,我是「的狀態,單件」我應該更清楚,道歉! 我想回答我自己的問題,我正在尋找以下... 避免使用c oncat(),slice()和...傳播並避免使用...傳播的對象突變。 我想我應該對每一個進行進一步的研究,因爲我寧願使用盡可能少的外部庫。雖然會熱衷於獲得意見! –

+0

@Thomas_Hoadley所以你指的是減速器功能中使用的方法來不可改變地重建狀態?您的評論或多或少地回答了實際情況(即使用concat(),slice(),... spread)。另一個要記住的是Object.assign()。我個人的偏好是傳播運營商,因爲我使用Babel,我發現它是最乾淨和最清晰的。如上所述,Redux並不需要Immutable.js,我主要使用它b/c我有大量深層嵌套的對象處於狀態,它們在'shouldComponentUpdate()'中的不可變結構時比較快。 –

+0

好的,非常感謝你的幫助!我會盡量堅持使用基本的方法,只有在需要時才使用immutable.js!謝謝你的幫助! –

0

我發現這個系列的關於該主題的真正有用的視頻:

https://egghead.io/courses/getting-started-with-redux

它是免費的,從陣營文檔中推薦。有一些特定的簡短部分描述瞭如何編寫不修改現有狀態的Reducer功能。他們討論使用Object.assign(),ES6 ...蔓延運營商等

一個特別的策略,我發現原來的狀態使用deepFreeze,以確保您的減速功能不修改,它正在測試非常有用。

https://www.npmjs.com/package/deep-freeze-strict

0

,引起了我出的主要問題是,當你從減速返回state對象,沒有什麼終極版執行您只需變異先前的狀態,意外或其他原因。

我返回更新狀態的副本與Object.assign({}, state, {key: 'new value'}),但如果你的狀態是不平坦的,即

state => {foo: {bar: {baz: 'some value'}}} 

嵌套的對象將是引用而不是複製,因爲Object.assign()深複製,並且變得很容易保持陳舊狀態,或者通過覆蓋更高的值來意外地核對嵌套屬性。

Immutable.js和其他庫將幫助您使用實用程序來解決此問題。或者你可以保持狀態平坦,像REDX文檔推薦的那樣。你可以單獨複製每個嵌套屬性,但是這會給reducer增加一大堆垃圾。

+0

這是設計! 爲了保持性能,部分狀態不變的應該通過引用傳遞到新狀態,以便不重建整個狀態樹。理想情況下,減速器只會產生最小量的新狀態,並且只有與動作相關的部分。然後這個新的狀態片被這個「之上」的減法器整合到整個狀態樹中。 – Hovis

1

我剛剛寫了一篇關於此的博客文章!你可以在這裏找到它:http://www.curbitssoftware.com/2017/08/25/react-redux-immutable-update-cheat-sheet/

與Redux一起工作時,一件非常重要的事情是,你不應該改變(直接改變)你的狀態。相反,您應該總是返回您更改狀態的副本(常見的錯誤概念是您需要複製/克隆所有內容,請閱讀更多herehere。這意味着您需要學習處理數組的新方法,更改屬性對象等。爲方便起見,我們希望分享我們自己的小抄/食譜,有最常見的情況。

祝你好運!