时间戳

首页 > 解决方案 > 在减速器中复制状态导致缓慢

reactjs - 在减速器中复制状态导致缓慢

问题描述

我有一个减速器，它给了我一些缓慢。我已将克隆/复制我的状态的一部分的步骤确定为慢步骤。

export default function itemReducer(state = initialState, action) {
   case ITEM_FETCH_IMPACT_UPDATE:
        {
            let index = action.payload.index
slow step-> let items = [...state.items]; 
            items[index] = {...items[index], overallIsLoading: true};
            return {...state, items}
        };
}

items是一个相当大的数组，包含大约 300 个对象，每个对象有大约 10 个属性。我应该如何在保持最佳 Redux/React 实践的同时加快速度？

标签： reactjsreduxreact-reduximmutability

解决方案

这是使用Immer 编写不可变更新的用例。

手动编写不可变的更新逻辑通常很困难并且容易出错。Immer 允许您使用“可变”逻辑编​​写更简单的不可变更新，甚至可以冻结您在开发中的状态以捕获应用程序中其他地方的突变。我们推荐使用 Immer 来编写不可变的更新逻辑，最好作为Redux Toolkit的一部分。

使用 Immer 草案或任何不可变库，此类代码将变为：

const index = action.payload.index;
state.items[index].overallIsLoading = true;

它将修补状态并返回不可变数据。

请参阅Redux Style Guide的推荐。

推荐阅读