Question

我正在尝试使用react-redux更新我的数组（嵌套数组）中的一个数组。我找到了解决方法，但是有比将多个参数传递给操作更简单的方法了。

[types.HISTORY_UPDATE](state, action){
  return { 
    ...state, 
    budgets: [
       ...state.budgets.slice(0,action.id),
       {
        key: action.key,
        id: action.idd,
        name: action.name,
        budgetType: action.budgetType,
        startDate: action.startDate,
        currency: action.currency,
        amount: action.amount,
        amountLeft: action.amountLeft,
        rollOver: action.rollOver,
        color: action.color,
        iconName: action.iconName,
        history: [
          ...state.budgets[action.id].history.slice(0,action.histId),
          {
            note: action.note,
           amount: action.amount,
            type: action.type,
            date: action.date,
            fullDate: action.fullDate,
            hours: action.hours,
            min: action.min,
            month: action.month,
            year: action.year
          },
          ...state.budgets[action.id].history.slice(action.histId+1)
      ]

    },
      ...state.budgets.slice(action.id+1)
      ]
 }
},

动作就这样

export function updateHistory(id,key,idd,name,budgetType,startDate,currency,amount,amountLeft,rollOver,color,iconName,histId,........){

我不想花时间在使用react-redux时传递这样的多个参数，而且当我尝试在手机上运行应用程序时，有时确实会使应用程序变慢。是因为上面的例子吗？

如果你们提出解决方案，我将不胜感激。

Answer 1

我通常不将数组存储在redux中，因为正如您所注意到的，更新单个元素确实是一个负担。如果数组中包含的所有对象都有唯一的ID，则可以轻松地将该数组转换为对象的对象。作为每个对象的键，您可以使用该ID。

const convertToObject = (array) => {
    let items = {};

    array.map((item) => {
      items[item.id] = item;
    });

    return items;
  };

在您的操作中，您只需要将要更新的项目传递为有效负载，即可非常轻松地更新redux存储。在下面的此示例中，我只是更新预算对象，但是当您为每个预算分配历史记录对象时，将应用相同的逻辑。

[types.BUDGET_UPDATE](state, action){

  const item = action.payload;

  return {
    ...state,
    budgets: {
      ...state.budgets,
      [item.id]: item
    }   
  }
}

如果您希望在组件代码中的某个位置放置一个数组，只需将redux存储对象转换回一个数组即可：

const array = Object.values(someReduxStoreObject);

有没有更简单的方法来更新react-native（react-redux）中的嵌套数组？

1 个答案: