Question

我正在使用redux对应用程序状态中的更改做出反应，并根据我的状态呈现ui。现在某些组件需要一次性方法调用。

以下示例：

我有一个网格。在网格中选择一个项目会更改我的应用程序的状态，并且我为此项目设置了selected属性。

添加项目，将我的州的selected属性设置为添加的项目。但随后，网格需要调用grid.clearCache()才能实际渲染添加的项目。

两种情况下的状态看起来实际上是相同的，如果不需要，我不想调用clearCache函数。这些项目不是状态的一部分，而是由组件本身延迟加载的。

向状态添加clearcache属性，然后再将其设置回原来的状态。

如何实现所需的行为？在这种情况下如何正确设计状态？

Answer 1

如何存储诸如firstUpdate这样的附加标志：true？

Answer 2

我不太了解您的问题。如果添加新物品，道具将发生变化，因此网格应自动更新（感谢React Magic）。无需再打grid.clearCache()。

这是我为您解决问题的简单设计方法。

const preState = {
  items: {
    1: {
      id: 1,
      itemName: '1'
    },
    2: {
      id: 2,
      itemName: '2'
    }
  },
  order: [1, 2],
  selectedItem: 1
}

export default (state = preState, action) => {
  switch (action.type) {
    case 'SELECT_ITEM':
      return {
        ...state,
        selectedItem: action.itemId
      }
    case 'ADD_NEW_ITEM':
      return {
        ...state,
        items: {
          ...state.items,
          [action.item.id]: action.item
        },
        order: [...state.order, action.item.id],
        selectedItem: action.item.id
      }
    default:
      return state;
  }
}

您的Grid Component应该从redux存储中读取items和selectedItem（如果需要对项目进行分类，则order）。

Redux-如何对变更做出反应

2 个答案: