組織 State · redux中文文檔

# Redux 常見問題：組織 State ## 目錄 - [必須將所有 state 都維護在 Redux 中嗎？可以用 React 的 setState() 方法嗎？](#organizing-state-only-redux-state) - [可以將 store 的 state 設置為函數、promise 或者其它非序列化值嗎？](#organizing-state-non-serializable) - [如何在 state 中組織嵌套及重復數據？](#organizing-state-nested-data) ## 組織 State <a id="organizing-state-only-redux-state"></a> ### 必須將所有 state 都維護在 Redux 中嗎？可以用 React 的 `setState()` 方法嗎？沒有 “標準”。有些用戶選擇將所有數據都在 Redux 中維護，那么在任何時刻，應用都是完全有序及可控的。也有人將類似于“下拉菜單是否打開”的非關鍵或者 UI 狀態，在組件內部維護。適合自己的才是最好的。使用局部組件狀態是更好的。作為一名開發者，應該決定使用何種 state 來組裝你的應用，每個 state 的生存范圍是什么。在兩者之間做好平衡，然后就去做吧。這里有一些將怎樣的數據放入 Redux 的經驗法則： - 應用的其他部分是否關心這個數據？ - 是否需要根據需要在原始數據的基礎上創建衍生數據？ - 相同的數據是否被用作驅動多個組件？ - 能否將狀態恢復到特定時間點（在時光旅行調試的時候）？ - 是否要緩存數據（比如：數據存在的情況下直接去使用它而不是重復去請求他）？有許多開源組件實現了各式各樣在 Redux store 存儲獨立組件狀態的替代方法，比如 [redux-ui](https://github.com/tonyhb/redux-ui)、 [redux-component](https://github.com/tomchentw/redux-component)、 [redux-react-local](https://github.com/threepointone/redux-react-local)等等。還可以將 Redux 的原則和 reducers 的概念應用到組件層面，按照 `this.setState((previousState) => reducer(previousState, someAction))` 的情形。 #### 補充資料 **文章** - [You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367) - [Finding `state`’s place with React and Redux.](https://medium.com/@adamrackis/finding-state-s-place-with-react-and-redux-e9a586630172#.ioh033t3j) - [A Case for setState](https://medium.com/@zackargyle/a-case-for-setstate-1f1c47cd3f73#.dwhuf0g8f) - [How to handle state in React. The missing FAQ. ](https://medium.com/react-ecosystem/how-to-handle-state-in-react-6f2d3cd73a0c) - [Where to Hold React Component Data: state, store, static, and this](https://medium.freecodecamp.com/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00) - [The 5 Types Of React Application State](http://jamesknelson.com/5-types-react-application-state/) **討論** - [#159: Investigate using Redux for pseudo-local component state](https://github.com/reactjs/redux/issues/159) - [#1098: Using Redux in reusable React component](https://github.com/reactjs/redux/issues/1098) - [#1287: How to choose between Redux's store and React's state？](https://github.com/reactjs/redux/issues/1287) - [#1385: What are the disadvantages of storing all your state in a single immutable atom？](https://github.com/reactjs/redux/issues/1385) - [Twitter: Should I keep something in React component state?](https://twitter.com/dan_abramov/status/749710501916139520) - [Twitter: Using a reducer to update a component](https://twitter.com/dan_abramov/status/736310245945933824) - [React Forums: Redux and global state vs local state](https://discuss.reactjs.org/t/redux-and-global-state-vs-local-state/4187) - [Reddit: "When should I put something into my Redux store?"](https://www.reddit.com/r/reactjs/comments/4w04to/when_using_redux_should_all_asynchronous_actions/d63u4o8/) - [Stack Overflow: Why is state all in one place, even state that isn't global？](http://stackoverflow.com/questions/35664594/redux-why-is-state-all-in-one-place-even-state-that-isnt-global) - [Stack Overflow: Should all component state be kept in Redux store？](http://stackoverflow.com/questions/35328056/react-redux-should-all-component-states-be-kept-in-redux-store) **庫** - [Redux Addons Catalog: Component State](https://github.com/markerikson/redux-ecosystem-links/blob/master/component-state.md) <a id="organizing-state-non-serializable"></a> ### 可以將 store 的 state 設置為函數、promise 或者其它非序列化值嗎？強烈推薦只在 store 中維護普通的可序列化對象、數組以及基本數據類型。雖然從 _技術_ 層面上將非序列化項保存在 store 中是可行的，但這樣會破壞 store 內容持久化和恢復能力，以及會干擾時間旅行。如果你不關心數據持久化和時間旅行，那么完全歡迎把不可以持久化的數據放入 Redux 的 Store 中存儲。最終，他是你的應用程序，如何實現完全取決于你自己。與其他很多 Redux 的事情一樣，你需要明白權衡所需。 #### 補充資料 **討論** - [#1248: Is it ok and possible to store a react component in a reducer？](https://github.com/reactjs/redux/issues/1248) - [#1279: Have any suggestions for where to put a Map Component in Flux？](https://github.com/reactjs/redux/issues/1279) - [#1390: Component Loading](https://github.com/reactjs/redux/issues/1390) - [#1407: Just sharing a great base class](https://github.com/reactjs/redux/issues/1407) - [#1793: React Elements in Redux State](https://github.com/reactjs/redux/issues/1793) <a id="organizing-state-nested-data"></a> ### 如何在 state 中組織嵌套及重復數據？當數據存在 ID、嵌套或者關聯關系時，應當以 “范式化” 形式存儲：對象只能存儲一次，ID 作為鍵值，對象間通過 ID 相互引用。將 store 類比于數據庫，每一項都是獨立的 “表”。[normalizr](https://github.com/gaearon/normalizr) 、 [redux-orm](https://github.com/tommikaikkonen/redux-orm) 此類的庫能在管理規范化數據時提供參考和抽象。 #### 補充資料 **文檔** - [Advanced: Async Actions](advanced/AsyncActions.md) - [Examples: Real World example](introduction/Examples.html#real-world) - [Recipes: Structuring Reducers - Prerequisite Concepts](https://github.com/reactjs/redux/blob/master/docs/recipes/reducers/PrerequisiteConcepts.md#normalizing-data) - [Recipes: Structuring Reducers - Normalizing State Shape](https://github.com/reactjs/redux/blob/master/docs/recipes/reducers/NormalizingStateShape.md) - [Examples: Tree View](https://github.com/reactjs/redux/tree/master/examples/tree-view) **文章** - [High-Performance Redux](http://somebody32.github.io/high-performance-redux/) - [https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f](https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f) **討論** - [#316: How to create nested reducers？](https://github.com/reactjs/redux/issues/316) - [#815: Working with Data Structures](https://github.com/reactjs/redux/issues/815) - [#946: Best way to update related state fields with split reducers？](https://github.com/reactjs/redux/issues/946) - [#994: How to cut the boilerplate when updating nested entities？](https://github.com/reactjs/redux/issues/994) - [#1255: Normalizr usage with nested objects in React/Redux](https://github.com/reactjs/redux/issues/1255) - [#1269: Add tree view example](https://github.com/reactjs/redux/pull/1269) - [#1824: Normalising state and garbage collection](https://github.com/reactjs/redux/issues/1824#issuecomment-228585904) - [Twitter: state shape should be normalized](https://twitter.com/dan_abramov/status/715507260244496384) - [Stack Overflow: How to handle tree-shaped entities in Redux reducers?](http://stackoverflow.com/questions/32798193/how-to-handle-tree-shaped-entities-in-redux-reducers) - [Stack Overflow: How to optimize small updates to props of nested components in React + Redux?](http://stackoverflow.com/questions/37264415/how-to-optimize-small-updates-to-props-of-nested-component-in-react-redux)