为动态存储属性分配减速器答案

【问题标题】：Assigning a reducer for a dynamic store property为动态存储属性分配减速器
【发布时间】：2015-10-31 00:21:47
【问题描述】：

我正在尝试弄清楚如何为我的状态树中从用户事件创建的属性设置 reducer。

我的状态树如下所示：

{
  session: { session object },
  dashboard: {
    id: 'id001',
    charts: {
      'cid001': { dimensions: { ... }, more objects... },
      'cid002': { dimensions: { ... }, more objects... }
    }

  } 
}

当用户单击“添加图表”按钮时，新的 charts 属性会通过 Redux 进入。键设置为图表 id，cid。

我目前正在使用combineReducers() 来设置reducer 树。

import session from './session';
import charts from './charts';

const rootReducer = combineReducers({
  session,
  dashboard: combineReducers({
    charts
  });
});

如果我提前知道属性名称，我可以像这样嵌套减速器。但是，我想避免为 charts 属性使用大量缩减器，因为其中的每个图表上可能还有多达 20 个需要缩减的对象，dimensions 只是一个示例。

有没有办法为charts['cidxxx'].dimensions 和其他子属性设置reducer？是否有通配符令牌？有什么想法吗？

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

对象传播对于这样的事情会很好。

function chartsReducer(state, {payload}) {
  const {cid} = payload;
  const currentChart = state[cid] || {};
  return {...state, [cid]: {...currentChart, ...payload}};
}

如果您希望在属性树方面更深入，可能值得考虑如何更改数据的形状以匹配您的使用方式。

【讨论】：