проблема государственного разрушения в редуксе - PullRequest
Новая
       22

проблема государственного разрушения в редуксе

0 голосов
/ 26 апреля 2019

РЕЗЮМЕ

Я переписываю состояние редукса, разрушая поддерево, но после этого часть состояния отсутствует

ИНФОРМАЦИЯ О ПРОЕКТЕ

Зависимости от моего реактивного проекта:

  • response-redux ":" ^ 6.0.1 "
  • redux ":" 4.0.1 "
  • redux-thunk ":" 2.3.0 "
  • ...

КОД

исходное состояние: 

const initialState = {
  fetching: false,
  data: {
    events: null,
    issues: null,
    sla: {
      daily: null,
      weekly: null,
    },
    lastUpdate: null,
  },
  error: null,
};

часть редуктора, где отсутствуют данные: 

case types.FETCH_DATA.SUCCESS:
  return {
    ...state,
    data: {
      ...state.data,
      sla: {
        ...state.data.sla,
        ...payload.data.sla,
      },
      ...payload.data,
    },
    fetching: false,
    error: null,
  };

данные отправляются по действию: 

{
  events: ["event 1", "event 2"],
  issues: ["issue 1", "issue 2"],
  sla: {
    daily: ["daily 1", "daily 2"],
}

состояние после отправки действия: 

{
  fetching: false,
  data: {
    events: ["event 1", "event 2"],
    issues: ["issue 1", "issue 2"],
    sla: {
      daily: ["daily 1", "daily 2"],
    },
    lastUpdate: null,
  },
  error: null,
}

data.sla.weekly отсутствует

если я не отправляю вопросы о действии: 

{
  events: ["event 1", "event 2"],
  sla: {
    daily: ["daily 1", "daily 2"],
}

состояние после отправки действия: 

{
  fetching: false,
  data: {
    events: ["event 1", "event 2"],
    issues: null,
    sla: {
      daily: ["daily 1", "daily 2"],
    },
    lastUpdate: null,
  },
  error: null,
}

В этом случае ... разрушение state.data работает хорошо, но ... state.data.sla не

пожалуйста, кто-нибудь, кто мне поможет !!!

1 Ответ

1 голос
/ 26 апреля 2019

Деструктурирование работает, как и ожидалось, но ваша последовательность должна измениться 

case types.FETCH_DATA.SUCCESS:
  return {
    ...state,
    data: {
      ...state.data,
      sla: {
        ...state.data.sla,
        ...payload.data.sla,
      },
      ...payload.data, <---- This is overriding the previous `sla` but the action contains `sla.daily` only, that's why your `sla.weekly` is gone
    },
    fetching: false,
    error: null,
  };

Попробуйте изменить последовательность 

case types.FETCH_DATA.SUCCESS:
  return {
    ...state,
    data: {
      ...state.data,
      ...payload.data, <-- Move up before `sla`
      sla: {
        ...state.data.sla,
        ...payload.data.sla,
      },
    },
    fetching: false,
    error: null,
  };

Но ваше состояние кажется довольно сложным, если возможно, упростите егосделает вашу жизнь проще ...

...