資訊專欄INFORMATION COLUMN
摘要：一些常見的方法如果你需要存儲一些每個項目都帶有的數據，可以使用或者對象數組來保存。數組對象這是最常見的一種范式。對象數組這讓你可以遍歷列表并輕松訪問和值，但是它做到以的時間復雜度快速訪問，因為它是一個數組。
翻譯：瘋狂的技術宅
作者：Nick Sweeting
英文標題：Shape your redux store like your database
英文原文：https://hackernoon.com/shape-...
說明：本專欄文章首發于公眾號：jingchengyideng 。
使用索引可以從多個維度表現數據。(此處應為動圖，請看原文)
最近我在RC聊天系統瀏覽關于 JavaScript 的一些討論時，注意到了Kate Ray的一個問題：
應該怎樣在 redux 存儲中結構話我的數據？
的確，這是使用 redux 時最常見的問題之一。
有很多需要考慮的東西，你經常會像訪問一個行列表一樣遍歷數據嗎？ 你需要以O(1)的時間復雜度快速訪問某些條目嗎？
我在實踐中得到了一些經驗，通常在訪問時間和迭代的難易程度之間做一些權衡。
一些常見的方法如果你需要存儲一些每個項目都帶有id的數據，可以使用Array, Object, 或者 對象數組來保存。
數組對象[{values}]：這是最常見的一種范式。它使迭代變得容易，但是不經過迭代和過濾就不能快速訪問特定條目。
categories: [
{name: "abs", id: "32o8wafe", exercises: ["crunches", "plank"]},
{name: "arms", id: "oaiwefjo", exercises: [...]},
{name: "legs", id: "aoijwfeo", exercises: [...]},
]
以id為索引的對象{id: {values}}：
這種方法可以是你以O(1)的時間復雜度快速訪問每個項目，但是在使用object.values()進行迭代時，不能很容易地訪問給定項目對應的id。
對象數組 [{id: {values}}]：這讓你可以遍歷列表并輕松訪問id和值，但是它做到以O(1)的時間復雜度快速訪問，因為它是一個數組。
categories: [
{32o8wafe: {name: "abs", exercises: [...]},
{oaiwefjo: {name: "arms", exercises: [...]},
{3oij2e3c: {name: "legs", exercises: [...]},
]
把它像數據庫一樣構造成由id對行進行索引的結構
在學習redux的過程中，我在Monadical偶然發現了一種不同的方法，它使我們受益于簡單的Object.values(state.categories)，并能夠以O(1)的時間復雜度快速對單個項目的訪問:
categories: {
32o8wafe: {id: "32o8wafe", name: "abs", exercises: [...]},
oaiwefjo: {id: "oaiwefjo", name: "arms", exercises: [...] },
3oij2e3c: {id: "3oij2e3c", name: "legs", exercises: [...] },
}
請注意id既是行的鍵，同時也是行本身的屬性。這一點點重復使我們在訪問時間上有了很大的靈活性。這也與Redux文檔推薦的歸一化（也稱扁平）模型兼容。
現在你可以遍歷數據了，也可以在迭代時訪問id！
Object.values(categories).map(cat => ({id: cat.id, name: cat.name}))
或者通過id快度訪問任何項目！
categories[category_id].name
我們將這樣組織好的數據發送到前端，前端就不需要做任何處理來生成id: values映射，從而也就減少了錯誤的產生。在后端很容易做到這一點，因為你很可能從數據庫中提取數據，而數據庫中已經存在id字段，可以直接將其作為鍵使用。
索引的力量請注意，我們上面介紹的結構只是一些行的索引，索引是id。你也可以這樣設計自己的存儲結構：使用你想要用的字段生成索引，來達到O(1)的時間復雜度進行快速訪問
按名稱索引類別：categories_by_name = {
abs: "32o8wafe",
arms: "oaiwefjo",
legs: "3oij2e3c",
}
const get_category_by_name = (store, name) =>
store.getState().categories[categories_by_name[name]]
也可以為同樣的數據構建盡可能多的索引，這樣將使你在任何列上基于O(1)的速度進行訪問，就像在數據庫中一樣。
把你存儲的數據想象成為圖書館，可以用索引快速找到任何項目（此處應為動圖，請看原文）
Normalizr與Reselect這里描述的模式正是Normalizr庫所使用的模式。如果你想把你的數據扁平化(按類型分開)，就像我前面介紹的索引概念一樣，請閱讀Normalizr的文檔《Redux Without Profanity docs》。
Redux 和 Normalizr 與 Reselect 配合的也很好，如果你關心性能，并且喜歡有一個中央列表的記憶選擇器，可以關注一下。
擴展閱讀http://redux.js.org/docs/basi...
http://redux.js.org/docs/reci...
https://egghead.io/lessons/ja...
https://stackoverflow.com/que...
https://stackoverflow.com/que...
https://codeburst.io/how-to-s...
https://tonyhb.gitbooks.io/re...
歡迎掃描二維碼關注公眾號，每天推送我翻譯的技術文章。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84652.html
摘要：我現在寫的這些是為了解決和這兩個狀態管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數式編程是不斷上升的范式，但對于大部分開發者來說是新奇的。規模持續增長的應 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...
摘要：我的教程可能也會幫你一把其他的二分法展示型組件和容器型組件這種分類并非十分嚴格，這是按照它們的目的進行分類。在我看來，展示型組件往往是無狀態的純函數組件，容器型組件往往是有狀態的純類組件。不要把展示型組件和容器型組件的劃分當成教條。 本文譯自Presentational and Container Components，文章的作者是Dan Abramov，他同時也是Redux和Crea...
摘要：自己英語一般，水平有限，獻上原文地址，還有我翻譯的中文地址，歡迎大家勘誤下面是自己的一點感想先說一下，我們知道，前端優化有這么幾步，第一步首先呢我們知道，一個應用要依賴好多條文件，而瀏覽器加載完一條，要執行完這條才加載下一條，所以呢，就很慢 自己英語一般，水平有限，獻上原文地址，還有我翻譯的中文地址，歡迎大家勘誤 下面是自己的一點感想 先說一下webpack，我們知道，前端優化有這么幾...
摘要：所以，單向數據流的意思是指在變更檢測期間屬性綁定變更的架構。相反，輸出綁定過程并沒有在變更檢測期間內運行，所以它沒有把單向數據流轉變為雙向數據流。說的單向數據流說的是服務層，而不是視圖層嗷。 原文鏈接： Do you really know what unidirectional data flow means in?Angular 關于單向數據流，還可以參考這篇文章，且文中還有 y...
摘要：我把這兩大類稱作和，但是我也聽說他們被稱為和和和等。雖然叫法不同，但核心思想都差不多它必須能獨立運作。。不能依賴依賴這個的或者部分可以允許有這樣的話有助于這個組件有修改彈性接受數據和數據的改變只能通過來處理不必也不能用。 Smart and Dumb Components 原文地址 showImg(https://segmentfault.com/img/bVrpJl); 當我在寫Re...
閱讀 1794·2021-11-18 10:02
閱讀 3524·2021-11-16 11:45
閱讀 1786·2021-09-10 10:51
閱讀 2106·2019-08-30 15:43
閱讀 1372·2019-08-30 11:23
閱讀 1484·2019-08-29 11:07
閱讀 1892·2019-08-23 17:05
閱讀 1394·2019-08-23 16:14
