В Redux, как мне обновить только часть объекта состояния? - PullRequest
0 голосов
/ 07 мая 2018

Я все еще думаю о Redux и задаюсь вопросом, является ли мое решение для частичного обновления объекта состояния лучшим способом.

Вот пример, в моих действиях у меня есть две функции - getA и getB, они разделяют одно и то же состояние, и каждое обновление только часть состояния. Затем я передаю существующее состояние моему редуктору.

// Action
export function getA() {
  return (dispatch, getState) => {
    const existing = getState().myReducer.myObj;
    dispatch({type: PENDING, existing})
    // ... Fetch data "A" from API
    // On success...
     dataA => dispatch({type: CASE_A, existing, dataA})
  }
};
export function getB() {
  return (dispatch, getState) => {
    const existing = getState().myReducer.myObj;

    // ... Fetch data "B" from API
    // On success...
    dataB => dispatch({type: CASE_B, existing, dataB})
  }
};

// Reducer
initialState = {
  ...
  myObj: {
    keyA: null,
    keyB: null
  }
};

export default function myReducer(state = initialState, action) {
  switch(action.type) {
    case PENDING:
      return {
        ...state,
        myObj: {
          ...action.existing
        }
      }
    case CASE_A:
      return {
        ...state,
        myObj: {
          ...action.existing
          keyA: action.dataA
        }
      }
    case CASE_B: 
      return {
        ...state,
        myObj: {
          ...action.existing
          keyB: action.dataB
        }
      }
    // ...
  }
};

Все работает правильно, существующий myObj переходит в состояние ожидания, затем обновляется либо A, либо B, в зависимости от того, какое действие вызывается.

Мой вопрос - лучше ли подходить к существующему состоянию через действия?

1 Ответ

0 голосов
/ 07 мая 2018

Определенно нет, у вас уже есть действие existing state в state.myObj и В PENDING, почему вы делаете это

 myObj: {
     ...action.existing
 }

Вы можете просто сделать это myObj = action.existing, если хотите заменить полный объект.

export default function myReducer(state = initialState, action) {
    switch (action.type) {
        case PENDING:
            return {
                ...state,
                myObj: {
                    ...state.myObj
                }
            }
        case CASE_A:
            return {
                ...state,
                myObj: {
                     ...state.myObj,
                    keyA: action.dataA
                }
            }
        case CASE_B:
            return {
                ...state,
                myObj: {
                    ...state.myObj,
                    keyB: action.dataB
                }
            }

    }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...