如何在类似Om的不可变应用状态中建模关系数据

Question

我正在尝试决定是使用更传统的Flux实现还是采用类似Om的结构.我真的很喜欢在javascript中使用带有游标的单个不可变app状态对象的想法,但我不确定如何建模关系数据.我正在寻找像Morearty这样的东西.

我的问题是如何避免重复数据并处理从服务器发送的嵌套关系数据？假设我有REST端点,它为我提供库存,每个库存项目都有一个嵌套供应商.我也有供应商的端点.我想要一个处于我的应用状态的所有供应商的列表,但也在我的库存项目中引用这些供应商.当我对供应商进行更新时,我希望它更改引用该供应商的所有库存项目.

类似于Om的结构是否适合这种应用,或者更传统的Flux风格的应用程序是否更好？

Answer 1

您可能想研究像Redux这样的东西作为您的“flux”框架。它绝对是优秀的\xe2\x80\x94，我们在 Docker 中使用它。这就是它的好处以及它如何为您提供帮助。

\n\n

为什么使用redux？

\n\n

它采用单店模式。所有存储都将 Redux 内部的状态保存在自己的密钥中。Redux 保存的状态示例如下：

\n\n

{\n  vendors: [{...}, ...], // The "vendor" store updates this part of the state\n  inventory: [...] // the "inventory" store updates this part of the state\n}\n

\n\n

Redux，或者说 redux 提供者，是所有组件的父级。因此，所有组件都接收状态作为 props。

\n\n

单店模式如何改善现状？

\n\n

\n

1. 每个单独的“存储”响应 Redux 中的操作，仅更新状态对象的一部分。例如，“供应商”存储仅更新状态的“供应商”键。每次发生操作时，都会向各个存储提供当前状态。这使得商店变得完全纯粹。 这对于测试、不可变数据、热重载、倒回等非常有用。

\n

2. 因为您的单个顶级 Redux 存储保存了所有状态，所以每个组件都可以接收此状态作为 props，并在此状态更改时自动重新渲染 \xe2\x80\x94 ，甚至来自层次结构之外的不相关组件。

\n

\n\n

这是一个正在运行的单个商店的示例，您可以了解一下：

\n\n

import assign from \'object-assign\';\nimport consts, { metrics, loading, URLS } from \'consts\';\n\nconst actions = {\n  // As you can see, each action within a store accepts the current "state" \n  // and can modify that state by returning new data.\n  [metrics.FETCH_METRICS_PENDING]: (state, data) => {\n    return assign({}, state, {status: loading.PENDING});\n  },\n\n  [metrics.FETCH_METRICS_SUCCESS]: (state, data) => {\n    return assign({}, state, {status: loading.SUCCESS, metrics: data.payload});\n  },\n\n  [metrics.FETCH_METRICS_FAILURE]: (state, data) => {\n    return assign({}, state, {status: loading.FAILURE});\n  },\n\n  [metrics.OBSERVE_METRICS_DATA]: (state, data) => {\n    let metrics = state.metrics.slice().concat(data.payload);\n    return assign({}, state, {metrics});\n  }\n}\n\n// This is the single method that\'s exported and represents our store.\n// It accepts the current state as its primary argument, plus the action\n// data as a payload.\n//\n// This delegates to the methods above depending on `data.type`.\nexport default function metricStore(state = {}, data) {\n  if (typeof actions[data.type] === "function") {\n    return actions[data.type](state, data);\n  }\n  return state;\n}\n

\n\n

这个模型如何建立关系数据？

\n\n

每次通过操作创建者请求数据时，它都可以调度多个操作来一起更新供应商和库存状态。这将在一次渲染中反映在您的应用程序中。

\n