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

XanaHopper 發(fā)布于2019-08-20 18:32 / 2212人閱讀

摘要：一些常見的方法如果你需要存儲(chǔ)一些每個(gè)項(xiàng)目都帶有的數(shù)據(jù)，可以使用或者對(duì)象數(shù)組來保存。數(shù)組對(duì)象這是最常見的一種范式。對(duì)象數(shù)組這讓你可以遍歷列表并輕松訪問和值，但是它做到以的時(shí)間復(fù)雜度快速訪問，因?yàn)樗且粋€(gè)數(shù)組。

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

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

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

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

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

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

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

一些常見的方法

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

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

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

categories: [
  {name: "abs",  id: "32o8wafe", exercises: ["crunches", "plank"]},
  {name: "arms", id: "oaiwefjo", exercises: [...]},
  {name: "legs", id: "aoijwfeo", exercises: [...]},
]

以id為索引的對(duì)象{id: {values}}：

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

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

這讓你可以遍歷列表并輕松訪問id和值，但是它做到以O(shè)(1)的時(shí)間復(fù)雜度快速訪問，因?yàn)樗且粋€(gè)數(shù)組。

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

把它像數(shù)據(jù)庫一樣構(gòu)造成由id對(duì)行進(jìn)行索引的結(jié)構(gòu)

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

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

請(qǐng)注意id既是行的鍵，同時(shí)也是行本身的屬性。這一點(diǎn)點(diǎn)重復(fù)使我們?cè)谠L問時(shí)間上有了很大的靈活性。這也與Redux文檔推薦的歸一化（也稱扁平）模型兼容。

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

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

或者通過id快度訪問任何項(xiàng)目！

categories[category_id].name

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

索引的力量

請(qǐng)注意，我們上面介紹的結(jié)構(gòu)只是一些行的索引，索引是id。你也可以這樣設(shè)計(jì)自己的存儲(chǔ)結(jié)構(gòu)：使用你想要用的字段生成索引，來達(dá)到O(1)的時(shí)間復(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ù)庫中一樣。

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

Normalizr與Reselect

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

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

擴(kuò)展閱讀

http://redux.js.org/docs/basi...

http://redux.js.org/docs/reci...

https://egghead.io/lessons/ja...

https://stackoverflow.com/que...

https://codeburst.io/how-to-s...

https://tonyhb.gitbooks.io/re...

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84652.html