Оптимизация обновления состояния притока

Question

У меня есть веб-приложение, которое получает обновление от 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

Первый адрес:

веб-приложение, которое получало обновление от веб-сокета, например, 100 сообщений в секунду

Вы должны газ илиотмените их, чтобы не обновлять состояние для каждого сообщения.Или уменьшите количество сообщений, если можете.Или и то, и другое.

Как только вы уберете это с пути, приложение, вероятно, должно работать нормально.Но вы все равно могли бы внести некоторые улучшения:

С учетом этого действия:

{
  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

Три наблюдения:

• Возможно, вам не нужно обновлять интерфейс 100 раз в секунду. Вам следует ограничить или пакетировать обновления веб-сокета, чтобы было меньше обновлений состояния и, следовательно, меньше обновлений пользовательского интерфейса.
• Вместо того, чтобы использовать immutable-helper для неизменяемых обновлений, я бы рекомендовал вам использовать https://github.com/immerjs/immer. Это намного проще и проще в использовании. Более того, используйте наш новый Redux Starter Kit со встроенным Immer.
• как сказал @Aleks, вы должны попытаться нормализовать форму своего состояния , чтобы не иметь дело с таким большим количеством вложенных данных.

Answer 3

Как насчет того, чтобы бросить массивы и создать такой магазин?

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

Вы можете получить доступ к идентификаторам с помощью store.data[id].child[index]

Короче говоря, это будет

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