【问题标题】:Does the size of Redux Store grow every time I change pages in my App?每次我在我的应用程序中更改页面时,Redux Store 的大小都会增长吗?
【发布时间】:2020-04-02 08:13:13
【问题描述】:

我们计划在我们的 React 应用程序中使用 Redux 和 Redux-thunk。通常,每次我们在浏览器中打开一个页面(从菜单或诸如此类)时,我们通常会从 Redux 调用一些 Action Creator。假设这些动作创建者调用了一个 REST API,最后从远程站点获取了一些数据,并将这些信息存储在我们的 Redux 存储中。

从一开始,即当我第一次在浏览器中加载应用程序时,每次更改页面时,商店都会变大。这意味着我的应用程序的内存打印会随着我从员工页面更改为任务页面等而增长。

典型 Redux 应用程序的最佳实践是什么?当我们沿着页面移动时,有没有办法缩小商店的规模?

在上面的示例中,当我移动到任务页面时,我可能不再需要员工信息,但该信息仍然占用我的 Redux Store 中的内存空间。无论如何,如果我再次移动到员工页面,我可能需要重新获取该员工数据。因此,当我在应用程序的其他页面中游弋时,我觉得将这些信息保留在我的商店中是没有意义的。

对于很多应用程序来说这不是问题,但如果我们正在处理大数据,或者如果我们的应用程序中有太多页面,那么内存问题就真的很严重了。

【问题讨论】:

标签: reactjs redux react-redux redux-thunk


【解决方案1】:

这完全取决于您如何管理减速器中的状态。如果您设置减速器来替换存储中的数据,那么不,存储不会变大。

function employeesReducer(state = initialState, action) {
  switch (action.type) {
    case SET_EMPLOYEES:
      return {...state, employees: action.employees};
  }
  return state;
}

在另一种情况下,您可以在 reducer 状态和操作中无限期地附加到列表中的列表,然后是的,存储将变得更大。

function employeesReducer(state = initialState, action) {
  const newState = {...state};
  switch (action.type) {
    case ADD_EMPLOYEES:
      newState.employees.append(action.employees)
  }
  return newState;
}

在上述情况下,您需要一个清除/重置机制。

以上只是一个简单的示例,但在大型应用程序中,您可以在数据集扩展的地方获得“泄漏”reducer,但这可能是由于编程错误或不断追加数据造成的。

另一个内存可以不断扩展的例子是,如果你实现了一个 redux 撤消,你每次都保存你的状态,以便你可以重放它。这是一个 library 可以做到这一点。

【讨论】:

    猜你喜欢
    • 2023-01-12
    • 1970-01-01
    • 2019-05-16
    • 2020-10-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-10-24
    相关资源
    最近更新 更多