Question

我有一个Web应用程序，它从websocket接收更新，例如每秒100条消息。

我正在使用不可变的帮助程序并尝试过

const parentIndex = action.payload.data.findIndex( i => i.id===action.id)
if(parentIndex !== -1) {
  const childIndex = action.payload.data[parentIndex].child.findIndex(c=>i.id===action.childId)
  if(child !== -1) {
     const lastChildIndex = action.payload.data[parentIndex].child[childIndex].lastChild.findIndex(l=>l.id===action.lastChildId)
     return lastChildIndex=== -1
     ? update(state, {   // insert
         data: {
           [parentIndex]: {
             child: {
               [childIndex]: {
                 lastChild: {
                   $push: [{
                      parentId: action.id,
                      childId: action.childId,
                      lastChildId: action.lastChildId,
                      price: action.payload.price
                   }]
                 }
               }
             }
           }
         }
       })
      : update(state, {   // update
         data: {
           [parentIndex]: {
             child: {
               [childIndex]: {
                 lastChild: {
                   [lastChildIndex]:{
                     price:  { $set: action.payload.price},
                     isUpdated: { $set: true}
                   }
                 }
               }
             }
           }
         }
       })
  }
}

示例数据：

data = [
  {
    parentId: 123,
    itemName: 'John Doe',
    child: {
      childId: 456,
      childName: 'I am child one',
      lastChild: {
        lastChildId: 789,
        price: 143  
      }
    }
  },
  {
    parentId: 321,
    itemName: 'John Wick',
    child: {
      childId: 654,
      childName: 'I am child wick',
      lastChild: {
        lastChildId: 987,
        price: 44  
      }
    }
  }
]

这似乎至少可以处理5个数据数组，但是当数据超过15个时，浏览器似乎运行缓慢，内存泄漏并很快崩溃。.

每次有消息推送到应用程序时查找索引会杀死浏览器。

我正在使用redux-thunk作为中间件。

如果您可以向我推荐一些可以更快地更新/插入，更完美且无缝的东西。那太酷了。

Answer 1

首先解决这个问题：

一个从websocket接收更新的Web应用程序，例如每秒100条消息

您应throttle或将其反跳，以免更新每条消息的状态。或者，如果可以，减少邮件数量。或两者兼有。

一旦您解决了这个问题，该应用程序可能应该可以正常运行。但是您仍然可以进行一些改进：

执行此操作：

{
  payload: {
    parentId: 123,
    childId: 321,
    lastChildId: 555,
    price: 50
  }
}

您的减速器将如下所示：

const { parentId, childId, lastChildId } = action.payload;
const childItem = state[parentId][childId][lastChildId];
const newState = {...state}
newState[parentId][childId][lastChildId] = {...childItem, ...action.payload};

return newState;

如果我知道像我在这里一样需要查找特定项目，我选择一个映射而不是一个数组。

Answer 2

放弃数组并建立这样的商店如何呢？

    {
     id: {
           childId:{...data,etc..},
           childId2:{},
           ... 
         },
     id2: {...},
     ...
    }

您可以使用store.data[id].child[index]

访问ID

简而言之就是

if(store.data[parentIndex]&&store.data[parentIndex][childIndex]){
  !!!
}else{
  :(((
}

Answer 3

三个观察结果：

您可能不需要每秒更新UI 100次。您应该限制或批处理websocket更新，以使状态更新更少，从而UI更少。
我建议您使用https://github.com/immerjs/immer而不是使用immutable-helper进行不可变的更新。它更加简单易用。更好的是使用内置的Immer的新Redux Starter Kit package。
就像@Aleks所说的那样，您应该尝试normalize your state shape，以免您处理过多的嵌套数据。

优化更新Redux状态

3 个答案: