Обновление значения вложенного объекта редуктора Redux - PullRequest
Новая
       14

Обновление значения вложенного объекта редуктора Redux

0 голосов
/ 20 февраля 2019

У меня есть вопрос относительно Redux и обновления значения вложенного объекта.

Допустим, это мое начальное состояние: 

const INITIAL_STATE = {
 columnState: {
  1: {
    loading: false
  },
  2: {
    loading: false
  }
 }
};

Когда вызывается мой редуктор: 

case COLUMN_STATE_UPDATE:
    const { type } = payload;
    return {
       ...state
    }
}

Как обновить значение loading для определенного идентификатора?Допустим, я обновляю запись с ключом = 2, как мне изменить значение loading на true для объекта columnState с ключом 2 и вернуть новое состояние?

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019 
case COLUMN_STATE_UPDATE:
// payload = {type: 1, 1: {loading: true}}
    const {type} = payload;
    return {
       columnState: {...state.columnState, [type]: payload[type] }}
};

Выше может быть реализовано как: 

/**
   * @param {Object} state The Global State Object of shape:
   * @example
   * const INITIAL_STATE = {
   *     columnState: {
   *         1: {
   *             loading: false
   *         },
   *         2: {
   *             loading: false
   *         }
   *     }
   * };
   * @param {Object} action The Action Object of shape
   * @example 
   * let action = {type: 1, 1: {loading: true}};
   * @returns {Function} The "slice reducer" function.
   */

function columnStateUpdate(state = {}, action) {
    const {type} = action;
    switch(type) {
        case COLUMN_STATE_UPDATE:   
        return {
            columnState: {...state.columnState, [type]: action[type] }}
        };
    }
}

Я использую action вместо payload, потому что (state, action) - это стандартное соглашение об именах, используемое в Redux Docs

0 голосов
/ 20 февраля 2019

Если ваше действие COLUMN_STATE_UPDATE обновляет только часть columnState (при условии, что type в вашем payload в качестве ключа): 

case COLUMN_STATE_UPDATE:
    const { type } = payload;
    return {
       ...state,                     // keep the other keys as they were
       [type]: {                     // only update the particular one
           loading: true 
       }
    }
}

Если ваше действие COLUMN_STATE_UPDATEобновляет все состояние, которое выглядит как INITIAL_STATE (опять же, принимая type в вашем payload в качестве ключа): 

case COLUMN_STATE_UPDATE:
    const { type } = payload;
    return {
       ...state,                     // keep the other keys of state as they were
       columnState: {
           ...state.columnState,     // keep the other keys of columnState as they were
           [type]: {                 // only update the particular one
               loading: true
           }
       }

    }
}
...