成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【譯】像數(shù)據(jù)庫一樣設(shè)計你的 redux 數(shù)據(jù)

XanaHopper / 2155人閱讀

摘要：一些常見的方法如果你需要存儲一些每個項目都帶有的數(shù)據(jù)，可以使用或者對象數(shù)組來保存。數(shù)組對象這是最常見的一種范式。對象數(shù)組這讓你可以遍歷列表并輕松訪問和值，但是它做到以的時間復(fù)雜度快速訪問，因為它是一個數(shù)組。

翻譯：瘋狂的技術(shù)宅
作者：Nick Sweeting
英文標(biāo)題：Shape your redux store like your database
英文原文：https://hackernoon.com/shape-...
說明：本專欄文章首發(fā)于公眾號：jingchengyideng 。

使用索引可以從多個維度表現(xiàn)數(shù)據(jù)。(此處應(yīng)為動圖，請看原文)

最近我在RC聊天系統(tǒng)瀏覽關(guān)于 JavaScript 的一些討論時，注意到了Kate Ray的一個問題：

應(yīng)該怎樣在 redux 存儲中結(jié)構(gòu)話我的數(shù)據(jù)？

的確，這是使用 redux 時最常見的問題之一。

有很多需要考慮的東西，你經(jīng)常會像訪問一個行列表一樣遍歷數(shù)據(jù)嗎？ 你需要以O(shè)(1)的時間復(fù)雜度快速訪問某些條目嗎？

我在實踐中得到了一些經(jīng)驗，通常在訪問時間和迭代的難易程度之間做一些權(quán)衡。

一些常見的方法

如果你需要存儲一些每個項目都帶有id的數(shù)據(jù)，可以使用Array, Object, 或者 對象數(shù)組來保存。

數(shù)組對象[{values}]：

這是最常見的一種范式。它使迭代變得容易，但是不經(jīng)過迭代和過濾就不能快速訪問特定條目。

categories: [
  {name: "abs",  id: "32o8wafe", exercises: ["crunches", "plank"]},
  {name: "arms", id: "oaiwefjo", exercises: [...]},
  {name: "legs", id: "aoijwfeo", exercises: [...]},
]
以id為索引的對象{id: {values}}：

這種方法可以是你以O(shè)(1)的時間復(fù)雜度快速訪問每個項目，但是在使用object.values()進(jìn)行迭代時，不能很容易地訪問給定項目對應(yīng)的id。

對象數(shù)組 [{id: {values}}]：

這讓你可以遍歷列表并輕松訪問id和值，但是它做到以O(shè)(1)的時間復(fù)雜度快速訪問，因為它是一個數(shù)組。

categories: [
  {32o8wafe: {name: "abs",  exercises: [...]},
  {oaiwefjo: {name: "arms", exercises: [...]},
  {3oij2e3c: {name: "legs", exercises: [...]},
]
把它像數(shù)據(jù)庫一樣構(gòu)造成由id對行進(jìn)行索引的結(jié)構(gòu)

在學(xué)習(xí)redux的過程中，我在Monadical偶然發(fā)現(xiàn)了一種不同的方法，它使我們受益于簡單的Object.values(state.categories)，并能夠以O(shè)(1)的時間復(fù)雜度快速對單個項目的訪問:

categories: {
  32o8wafe: {id: "32o8wafe", name: "abs",  exercises: [...]},
  oaiwefjo: {id: "oaiwefjo", name: "arms", exercises: [...] },
  3oij2e3c: {id: "3oij2e3c", name: "legs", exercises: [...] },
}

請注意id既是行的鍵，同時也是行本身的屬性。這一點點重復(fù)使我們在訪問時間上有了很大的靈活性。這也與Redux文檔推薦的歸一化（也稱扁平）模型兼容。

現(xiàn)在你可以遍歷數(shù)據(jù)了，也可以在迭代時訪問id！

Object.values(categories).map(cat => ({id: cat.id, name: cat.name}))

或者通過id快度訪問任何項目！

categories[category_id].name

我們將這樣組織好的數(shù)據(jù)發(fā)送到前端，前端就不需要做任何處理來生成id: values映射，從而也就減少了錯誤的產(chǎn)生。在后端很容易做到這一點，因為你很可能從數(shù)據(jù)庫中提取數(shù)據(jù)，而數(shù)據(jù)庫中已經(jīng)存在id字段，可以直接將其作為鍵使用。

索引的力量

請注意，我們上面介紹的結(jié)構(gòu)只是一些行的索引，索引是id。你也可以這樣設(shè)計自己的存儲結(jié)構(gòu)：使用你想要用的字段生成索引，來達(dá)到O(1)的時間復(fù)雜度進(jìn)行快速訪問

按名稱索引類別： 
categories_by_name = {
  abs: "32o8wafe",
  arms: "oaiwefjo",
  legs: "3oij2e3c",
}
const get_category_by_name = (store, name) =>
    store.getState().categories[categories_by_name[name]]

也可以為同樣的數(shù)據(jù)構(gòu)建盡可能多的索引，這樣將使你在任何列上基于O(1)的速度進(jìn)行訪問，就像在數(shù)據(jù)庫中一樣。

把你存儲的數(shù)據(jù)想象成為圖書館，可以用索引快速找到任何項目（此處應(yīng)為動圖，請看原文）

Normalizr與Reselect

這里描述的模式正是Normalizr庫所使用的模式。如果你想把你的數(shù)據(jù)扁平化(按類型分開)，就像我前面介紹的索引概念一樣，請閱讀Normalizr的文檔《Redux Without Profanity docs》。

Redux 和 Normalizr 與 Reselect 配合的也很好，如果你關(guān)心性能，并且喜歡有一個中央列表的記憶選擇器，可以關(guān)注一下。

擴展閱讀

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...

歡迎掃描二維碼關(guān)注公眾號，每天推送我翻譯的技術(shù)文章。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84652.html

相關(guān)文章

  • 【譯】Redux 還是 Mobx，讓我來解決你的困惑！

    摘要：我現(xiàn)在寫的這些是為了解決和這兩個狀態(tài)管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數(shù)式編程是不斷上升的范式，但對于大部分開發(fā)者來說是新奇的。規(guī)模持續(xù)增長的應(yīng) 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

    txgcwm 評論0 收藏0

  • 【譯】展示型組件和容器型組件(作者：Dan Abramov，Redux的開發(fā)者)

    摘要：我的教程可能也會幫你一把其他的二分法展示型組件和容器型組件這種分類并非十分嚴(yán)格，這是按照它們的目的進(jìn)行分類。在我看來，展示型組件往往是無狀態(tài)的純函數(shù)組件，容器型組件往往是有狀態(tài)的純類組件。不要把展示型組件和容器型組件的劃分當(dāng)成教條。 本文譯自Presentational and Container Components，文章的作者是Dan Abramov，他同時也是Redux和Crea...

    lily_wang 評論0 收藏0

  • 前端優(yōu)化感想以及[譯]redux 教程 第一部分（共四部分

    摘要：自己英語一般，水平有限，獻(xiàn)上原文地址，還有我翻譯的中文地址，歡迎大家勘誤下面是自己的一點感想先說一下，我們知道，前端優(yōu)化有這么幾步，第一步首先呢我們知道，一個應(yīng)用要依賴好多條文件，而瀏覽器加載完一條，要執(zhí)行完這條才加載下一條，所以呢，就很慢 自己英語一般，水平有限，獻(xiàn)上原文地址，還有我翻譯的中文地址，歡迎大家勘誤 下面是自己的一點感想 先說一下webpack，我們知道，前端優(yōu)化有這么幾...

    snowell 評論0 收藏0

  • [譯] 你真的知道 Angular 單向數(shù)據(jù)流嗎

    摘要：所以，單向數(shù)據(jù)流的意思是指在變更檢測期間屬性綁定變更的架構(gòu)。相反，輸出綁定過程并沒有在變更檢測期間內(nèi)運行，所以它沒有把單向數(shù)據(jù)流轉(zhuǎn)變?yōu)殡p向數(shù)據(jù)流。說的單向數(shù)據(jù)流說的是服務(wù)層，而不是視圖層嗷。 原文鏈接： Do you really know what unidirectional data flow means in?Angular 關(guān)于單向數(shù)據(jù)流，還可以參考這篇文章，且文中還有 y...

    fox_soyoung 評論0 收藏0

  • ［譯］Smart and Dumb Components

    摘要：我把這兩大類稱作和，但是我也聽說他們被稱為和和和等。雖然叫法不同，但核心思想都差不多它必須能獨立運作。。不能依賴依賴這個的或者部分可以允許有這樣的話有助于這個組件有修改彈性接受數(shù)據(jù)和數(shù)據(jù)的改變只能通過來處理不必也不能用。 Smart and Dumb Components 原文地址 showImg(https://segmentfault.com/img/bVrpJl); 當(dāng)我在寫Re...

    mist14 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<