为动态存储属性指定还原器

Assigning a reducer for a dynamic store property

本文关键字:还原 属性 动态 存储      更新时间:2023-09-26

我正试图弄清楚如何为从用户事件创建的状态树中的属性设置一个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和其他子属性设置减少器?有通配符标记吗?有什么想法吗?

对象排列对于这样的东西来说会很好。

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

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