Неизменное обновление состояния. Обновление массива объектов в Redux - PullRequest
Новая
       56

Неизменное обновление состояния. Обновление массива объектов в Redux

0 голосов
/ 01 июля 2019

У меня есть состояние типа массив, который изначально выглядит так: 

const initialState = {
    spots: []
}

При первом обновлении оно заполняется объектами и выглядит так: 

state.spots = [
    { id: '1', available: 1, path: 'xxx' },
    { id: '2', available: 1, path: 'xxz' },
    { id: '3', available: 1, path: 'xxy' },
    { id: '4', available: 1, path: 'bxy' },
    { id: '5', available: 1, path: 'vxy' },
    { id: '6', available: 1, path: 'fxy' }
]

Во всех последующих обновлениях мы получаем все точки с ключами 'id' и 'available', но не с путем.

Таким образом, полезная нагрузка выглядит следующим образом: 

payload = [
    { id: '1', available: 1 },
    { id: '2', available: 0 },
    { id: '3', available: 0 },
    { id: '4', available: 1 },
    { id: '5', available: 0 },
    { id: '6', available: 1 }
]

Я пытаюсь выяснить неизменный паттерн ES6, чтобы обновить состояние, но, похоже, не могу понять, что это правильно.

EDIT: Лучшее решение, которое я нашел до сих пор, это следующее: 

state.spots = state.spots.map( (spot, key) => {    
  let new_spot = payload.find(o => o.id === spot.id);
  return { ...spot, ...new_spot }
})

Какой самый эффективный способ корректно обновить все объекты массива «пятна» с новой полезной нагрузкой.

Надеюсь, это понятно. Спасибо

1 Ответ

0 голосов
/ 02 июля 2019

CodeSandbox

Вы можете создать хэш-карту вашей полезной нагрузки, используя идентификатор каждого места в качестве ключа: 

const payload = [
    { id: '1', available: 1 },
    { id: '2', available: 0 },
    { id: '3', available: 0 },
    { id: '4', available: 1 },
    { id: '5', available: 0 },
    { id: '6', available: 1 }
]

// You can adjust the map to how you like.

const map = payload.reduce((acc, entry) => {
    acc[entry.id] = entry
    return acc
}, {})

и затем обновите state.spots в вашем редукторе: 

return {
    ...state,

    spots: state.spots.map(e => {
        if (map[e.id]) return { ...e, ...map[e.id] };
        return e;
    })
};
...