时间戳

首页 > 解决方案 > 将看不见的逻辑添加到只读状态 redux - 反应

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

问题描述

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

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

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

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

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

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

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

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

还原状态：

export interface EventsEntities {
  events: {
    [id: string]: Event;
  };
}
export interface EventState {
  readonly entities: EventsEntities;
  selectedItem: string | null;
  readonly result: string[];
}

标签： reactjsreduxnormalizr

解决方案

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

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

{
  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在使用事件数据的任何地方都使用属性，那么最好将它们保存在同一个地方，这样您就不需要每次都合并看不见的列表和事件数据。

推荐阅读