Question

我在飞行中有一个redux应用程序非常好用。但是，作为一些数据库查询的结果，存储在状态树中的一个数据结构可以包含60,000多个条目。这可以大大减缓反应的反应时间。

我没有涉及大量的减速器（可能是20？）所以我认为redux-ignore没有帮助。大数据结构中的数据是只读的，不需要更新。但是，加载它后，在树的不同部分使用immutability-helper的update（）或merge（）可能会很慢。

这是预期的行为吗？我正在考虑将数据结构移动到localStorage，但是将其存储在状态树中可以使代码保持简单（以及使状态更容易加载）。

建议？

markerikson：共享reducer和数据结构没有坏处！负责该州数据结构部分的唯一减速器是：

export function plotReducer(state={}, action) {
 switch(action.type) {
   case EMIT_PLOT_DATA_REQ:
     return update(state, {$set: action.payload.data });
   default:
     return state;
 }
}

此数据结构在接收时写入状态，然后仅由使用它的绘图表“读取”。它永远不会被修改。

从服务器接收的状态中存储的数据对象是包含多个对象数组的对象（根据recharts和其他绘图库的要求）。

商店的创建时间为：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
    reducers,
    initialState,
    composeEnhancers(
    applyMiddleware(
    ReduxPromise,
    ReduxThunk
  )
));

我在index文件中使用combineReducers来创建rootReducer。

研究过Immutable.js后，我可能只是将数据对象存储在状态之外的自己的结构中。

编辑：插入四个线索。该州一直表现良好。图表库绘制svg，并且它们对大型数据集很慢。我让他们经常重新渲染而不知道它。根据下面的反馈，我花了一天时间分析应用程序和状态机是好的。

Answer 1

您应该考虑将Immutable.js用于您的州。我们已经完成了与您的数据结构一样大的应用程序，并且在初始加载后UI仍然非常敏感。据我所知，这是因为不可变数据结构的内部在可能的情况下传递对现有对象的引用。因此，当单个条目发生更改时，它会重复使用99％的数据，而不是从头开始重新创建整个对象。这允许状态更改和组件更新非常快速。

基本上，如果您的状态对象不可变，那么每次状态更改时都会创建一个全新的状态对象，其中包括重写您的60k +条目。

更新：Mark Erikson在下面说的是你可以通过使用＆＃34;浅层克隆＆＃34;来解决重写问题。方法并确保您的减速器以有效的方式划分。但是，我也发现这很容易被意外搞砸，并且可能会破坏你不期望的地方的优化。 Immutable.js帮助您远离这些陷阱，但也有其缺点。查看Redux文档中的这篇文章，以帮助确定它是否是您的最佳选择。 http://redux.js.org/docs/recipes/UsingImmutableJS.html

Answer 2

您目前如何尝试更新商店？即使不使用Immutable.js，标准＆＃34;浅克隆＆＃34;诸如Object.assign和...对象扩展运算符之类的方法应该保留现有的引用和字段。并且，如果你有一个处理LOAD_THE_LARGE_DATASET动作的reducer，我希望其余的时间只返回它现有的状态切片不变。

另外，是什么让你说树的这一部分是'＃34;减慢React UI的反应时间＆＃34;？你有一些与此相关的具体基准吗？什么操作＆＃34;慢＆＃34;？

您可能需要阅读immutable data handling in Redux上的Redux常见问题解答部分以供参考。

redux状态树具有非常大的（非状态相关的，真正的）数据结构

2 个答案: