Question

我正在使用带有类似于here的api中间件的redux，它将响应数据规范化并将结果存储在我的状态的实体字段中。所以，如果我向客户端点发出请求，它返回的内容如下：

customers: [{
  id: 1,
  name: 'Bob',
  cards: [{id: 2, last4: '1234'}]
}]

我的商店看起来像：

{
  entities: {
    cards: {2: {id: 2, last4: '1234'}}
    customers: {1: {id: 1, name: 'Bob'}}
  }
}

我的问题是，再次建立这些关联的最佳方法是什么？这可以用选择器完成吗？

Answer 1

是的，在选择器中执行它听起来像一个好计划。对于简单的情况，您可以直接在mapStateToProps中的组件中执行此操作（无论如何，这几乎都是选择器）。我还看到有些人编写代码来使用normalizr模式对状态进行非规范化，因为组件会访问您可能想要试验的属性。

Answer 2

我发现这个库可以很容易地处理你的redux商店中的相关数据。 https://github.com/tommikaikkonen/redux-orm

Answer 3

在redux中，只有reducer知道如何改变状态。在您的特定情况下，reducer会获取客户有效负载并将其添加到状态。

将一个客户作为有效负载的示例：

const action = {
  customer: {
    id: 11,
    name: 'Joe',
    cards: [{id: 22, last4: '2345'}]
  }
};

const state = {
  entities: {
    cards: {2: {id: 2, last4: '1234'}},
    customers: {1: {id: 1, name: 'Bob'}}
  }
};

function reducerCustomer (state, action) {
  const cards = action.customer.cards.reduce((cards, card) => {
    cards[card.id] = card;
    return cards;
  }, {});

  const customers = {
    [action.customer.id]: {id: action.customer.id, name: action.customer.name}
  };

  return Object.assign({}, state, {
    entities: Object.assign({}, state.entities, {
      cards: Object.assign({}, state.entities.cards, cards),
      customers: Object.assign({}, state.entities.customers, customers)
    })
  });
}

如何在redux存储中设置与数据的关联

3 个答案: