Redux обновляет вложенные данные [Шаблоны неизменного обновления] - PullRequest
Новая
       31

Redux обновляет вложенные данные [Шаблоны неизменного обновления]

2 голосов
/ 11 октября 2019

Может кто-нибудь помочь с этим шаблоном обновления. Я не использую никаких библиотек, таких как immer.

Мне нужно обновить вложенный объект, и данные выглядят как dis

Пример данных 

    { 
      isFetching: false
      data:{
            nba : {
                    stack :{
                            1:[]
                           }
                  }
           }
    }

Мой редуктор 

 {
        ...state,
        isFetching: false,
        data: {
          ...state.data,
          [action.payload.team]: {
            ...state[action.payload.team],
            [action.payload.framework]: {
              ...state[action.payload.framework],
              [action.payload.build]: action.payload.resp
            }
          }
        }
 };

Я могу обновиться до второго уровня, но не могу обновить третьего ребенка. Кто-нибудь может пролить свет на то, где мне не хватает этого.

Я положил демо на коды и коробку. https://codesandbox.io/s/todos-0ygrs

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

Текущее поведение После расширения nba и всех трех дочерних элементов 

  {
    nba: {
           stack:{
                  3:[]
          }
  }

Ожидаемое поведение: После расширения стека и всех трех дочерних элементов 

 {
    nba: {
           stack:{
                   1:[],
                   2:[],
                   3:[]
               }
         }
   }

Ответы [ 2 ]

1 голос
/ 11 октября 2019

Каким-то образом я понял свою ошибку, Шаблон обновления должен быть, Надеюсь, это поможет кому-то в будущем

Начальное состояние не должно быть нулевым, это должен быть пустой объект, и шаблон обновления должен быть в этом

 {
    ...state,
    isFetching: false,
    data: {
      ...state.data,
      [action.payload.team]: {
        ...state.data[action.payload.team],
        [action.payload.framework]: {
          ...state.data[action.payload.team][action.payload.framework],
          [action.payload.build]: action.payload.resp
        }
      }
    }
  };

, если это не удается, попробуйте этот способ 

let teamTemp = { ...state.data[action.payload.team]}

     {
        ...state,
        isFetching: false,
        data: {
          ...state.data,
          [action.payload.team]: {
            ...teamTemp ,
            [action.payload.framework]: {
              ...teamTemp[action.payload.framework],
              [action.payload.build]: action.payload.resp
            }
          }
        }
      };

Я разбудил свои коды и ящик и обновил последний код.

1 голос
/ 11 октября 2019

Возможно, вам придется использовать get helper , потому что вы можете попытаться установить часть состояния, которая еще не существует.

С помощью get helper вы можете установить состояние следующим образомэто: 

const { team, framework, build, resp } = action.payload;
const newState = {
  ...state,
  isFetching: false,
  data: {
    ...get(state, ['data']),
    [team]: {
      ...get(state, ['data', team]),
      [framework]: {
        ...get(state, ['data', team, framework]),
        [build]: resp,
      },
    },
  },
};
...