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

Question

我正在尝试决定是使用更传统的 Flux 实现还是使用类似 Om 的结构。我真的很喜欢在 javascript 中使用带有游标的单个不可变应用程序状态对象的想法，但我不确定如何为关系数据建模。我正在考虑使用类似 Morearty 的东西.

我的问题是如何避免重复数据并处理从服务器发送的嵌套关系数据？假设我有 REST 端点给我库存，每个库存项目都有一个嵌套的 vendor 。我也有 vendor 端点。我想列出我的应用程序状态下的所有 vendor ，但也在我的库存项目中引用这些 vendor 。当我对 vendor 进行更新时，我希望它更改所有引用该 vendor 的库存项目。

类似 Om 的结构是否适用于此类应用程序，或者更传统的 Flux 风格应用程序是否会更好？

Answer 1

您可能想查看类似 Redux 的内容作为你的“通量”框架。它绝对出色——我们在 Docker 中使用它。这就是它的好处以及它如何为您提供帮助的原因。

为什么要使用 redux？

它使用单一商店模式。所有商店都将状态保存在 Redux 本身的 key 中。 Redux 保存状态的一个例子是:

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

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

单店模式如何改善事物？

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

2. 因为您的单个顶层 Redux 存储保存了所有状态，所以每个组件都可以接收此状态作为 props 并在此状态发生变化时自动重新呈现 - 即使来自层次结构之外的不相关组件也是如此。

   <

这是一个正在运行的单个商店的示例，因此您可以理解:

import assign from 'object-assign';
import consts, { metrics, loading, URLS } from 'consts';

const actions = {
  // As you can see, each action within a store accepts the current "state" 
  // and can modify that state by returning new data.
  [metrics.FETCH_METRICS_PENDING]: (state, data) => {
    return assign({}, state, {status: loading.PENDING});
  },

  [metrics.FETCH_METRICS_SUCCESS]: (state, data) => {
    return assign({}, state, {status: loading.SUCCESS, metrics: data.payload});
  },

  [metrics.FETCH_METRICS_FAILURE]: (state, data) => {
    return assign({}, state, {status: loading.FAILURE});
  },

  [metrics.OBSERVE_METRICS_DATA]: (state, data) => {
    let metrics = state.metrics.slice().concat(data.payload);
    return assign({}, state, {metrics});
  }
}

// This is the single method that's exported and represents our store.
// It accepts the current state as its primary argument, plus the action
// data as a payload.
//
// This delegates to the methods above depending on `data.type`.
export default function metricStore(state = {}, data) {
  if (typeof actions[data.type] === "function") {
    return actions[data.type](state, data);
  }
  return state;
}

该模型如何建立关系数据？

每次通过 Action 创建者请求数据时，它可以分派(dispatch)多个 Action 来一起更新 vendor 和库存状态。这将在一次渲染中反射(reflect)在您的应用中。