将看不见的逻辑添加到只读状态 redux - 反应

Posted 2023-02-22

【中文标题】将看不见的逻辑添加到只读状态 redux - 反应

【英文标题】：add unseen logic to readonly state redux - react

【发布时间】：2020-10-18 17:14:39

【问题描述】：

我的标准化事件如下所示：

"entities":
"events":
 "123":
   ... data
 
 "124":
   ...data
 

我在一个简单的材质 ui 列表中显示列表

现在，当单击按钮时，列表中的任何新项目现在都“看不见”并且不应被自动选择

我是否需要添加“看不见”：真/假。到基本的标准化数据？然后每次有新事件时发送更新？所以它看起来像：

"entities":
"events":
 "123":
   ... data
   unseen:false
 
 "124":
   ...data
   unseen: true
 

或者最好保留一个新的未见事件列表？ 我正在寻找一种更好的方法来处理它

在这种情况下我需要更改只读状态吗？因为现在我只更新一个完整的对象

redux 状态：

export interface EventsEntities 
  events: 
    [id: string]: Event;
  ;

export interface EventState 
  readonly entities: EventsEntities;
  selectedItem: string | null;
  readonly result: string[];

【参考方案1】：

假定 Redux 状态中的每个值都是只读的，因此在这两种情况下都不需要删除它。

您可以使用 Redux 操作更改 unseen 属性，例如

  type: 'toggle-unseen-event',
  eventId: '123',
  unseen: true

并像这样在减速器中处理它：

function eventsReducer(state, action) 
  switch(action.type) 
    ...
    case 'toggle-unseen-event':
      return 
        ...state,
        events: 
          ...state.events,
          [action.eventId]: 
            ...state.events[action.eventId],
            unseen: action.unseen
          
        
      
    ...
  

如您所见，我们不会改变事件对象，因此它可以是只读的。

---

Redux 状态的最佳设计取决于您想要使用数据的方式和位置。

如果某些组件中您仅使用事件数据（而不是 unseen），那么最好将未见事件列表保存在 Redux 状态中的单独位置，以便更改 unseen 属性不会导致重新渲染不关心它的组件。

但是，如果您在使用事件数据的任何地方都使用unseen 属性，那么最好将它们保存在同一个位置，这样您就不需要每次都合并看不见的列表和事件数据。

【讨论】：

我有一个显示事件列表的列表组件，我还需要看不见的，我选择了其他所有组件都使用的项目

在这种情况下，您可以简单地将unseen: true/false 保留在您的事件中，然后发送一个动作来设置它的值。

我如何处理只读状态？是否可以更新特定参数？

是的，您可以在不删除只读的情况下编辑对象。我将编辑答案并让我知道它是否清楚。