обновить тот же магазин с некоторыми значениями react-redux

Question

Есть ли способ обновить только некоторые значения в коллекции объектов в хранилище ReactJS? У меня есть вызов, который дает мне весь список клиентов с некоторым анонимным значением. Мне нужно обновить хранилище после получения этого ответа, но затем снова сделать другой вызов службы с этими анонимизированными данными, чтобы получить реальные значения. Мне нужны данные из первого вызова, а также для получения всей информации для моей сетки данных. Итак, как мне обновить свой магазин только с некоторой парой значений ключа, а не с целым набором данных в приложении react-redux?

Answer 1

Вы не указали какой-либо код, но ... вы сделали бы это в своем редукторе.

Допустим, у вас был редуктор с именем clientReducer, вы могли бы сделать что-то вроде этого, если это только один объект, как вы сказали выше.

function clientReducer(state, action) { 
    return Object.assign({}, state, { 
    [action.payload.key] : action.payload.value 
    } 
} 

Ваше действие будет выглядеть примерно так:

function changeClientValue(key, value) { 
    return { 
     type: 'CHANGE_CLIENT_VALUE', 
     payload: { 
     key: key, 
     value: value 
     } 
    } 
} 

Для массива объектов, я считаю, что это должно работать без использования каких-либо дополнительных библиотек, как неизменные JS. Хотя я его не тестировал!

const initialState = [ 
    { 
     id: 1, 
     clientFirstN‌​ame: 'Paul', 
     ...otherFields 
    }, 
    { 
     id: 2, 
     clientFirstN‌​ame: 'Adam', 
     ...otherFields 
    } 
]; 

// Reducers 
function clientSubReducer(state = initialState, action) { 
    switch(action.type) { 
     case 'MODIFY_CLIENT': 
      return { 
       ...state[action.payload.index], 
       ...action.payload.fields 
      } 
    } 
} 

export function clientReducer(state, action) { 
    switch(action.type) { 
     case 'MODIFY_CLIENT': 
      return [ 
       ...state.slice(0, action.payload.index), 
       clientSubReducer(state, action), 
       ...state.slice(action.payload.index + 1) 
      ] 
    } 
} 


//Action 
function modifyClient(client) { 
    return (dispatch, getStore) => { 
     const store = getStore(); 
     let storeIndex = -1; 

     for (let i = 0; i < store.clients.length; i++) { 
      const storeClient = clients[i]; 
      if (client.id === storeClient.id) { 
       storeIndex = i; 
      } 
     } 

     // Our store contains the client object 
     if (storeIndex > -1) { 
      dispatch({ 
       action: 'MODIFY_CLIENT', 
       payload: { 
        index: storeIndex, 
        fields: client // You could diff the client and store client and pass only the ones you want to modify back 
       } 
      }) 
     } 
     //Our Store does not contain the client object 
     else { 
      dispatch({ 
       action: 'ADD_CLIENT', 
       payload: { 
        client: client 
       } 
      }) 
     } 
    } 
}