레독스 저장소의 중첩된 데이터 업데이트

레독스 저장소의 중첩된 데이터 업데이트

redux를 사용하여 저장소에 중첩된 데이터 배열을 업데이트하는 가장 좋은/올바른 방법은 무엇입니까?

저희 가게는 다음과 같습니다.

{
    items:{
        1: {
            id: 1,
            key: "value",
            links: [
                {
                    id: 10001
                    data: "some more stuff"
                },
                ...
            ]
        },
        ...
    }
}

비동기 작업 쌍이 있어 이 작업을 완료하면items오브젝트는 갱신하고 싶은 다른 액션쌍이 있다.links어레이를 설정합니다.

현재 리듀서는 다음과 같습니다만, 이것이 올바른 어프로치인지 어떤지 잘 모르겠습니다.

  switch (action.type) {
    case RESOURCE_TYPE_LINK_ADD_SUCCESS:
      // TODO: check whether the following is acceptable or should we create a new one?
      state.items[action.resourceTypeId].isSourceOf.push(action.resourceTypeLink);
      return Object.assign({}, state, {
        items: state.items,
      });
  }

Jonny의 답변은 맞지만(당신에게 주어진 상태를 변형시키지 마세요!) 저는 그것에 한 가지 포인트를 더하고 싶었습니다.모든 개체에 ID가 있는 경우 일반적으로 상태 모양을 중첩된 상태로 유지하는 것은 좋지 않습니다.

이것은, 다음과 같습니다.

{
  items: {
    1: {
      id: 1,
      links: [{
        id: 10001
      }]
    }
  }
}

업데이트하기 어려운 모양입니다.

이럴 필요는 없어!대신 다음과 같이 저장할 수 있습니다.

{
  items: {
    1: {
      id: 1,
      links: [10001]
    }
  },
  links: {
    10001: {
      id: 10001
    }
  }
}

모든 엔티티의 표준 복사본이 하나만 있기 때문에 업데이트하기가 훨씬 쉽습니다.사용자가 링크를 편집할 수 있도록 해야 하는 경우 업데이트해야 하는 곳은 한 곳뿐입니다.또한 이 링크는 완전히 독립되어 있습니다.items또는 다른 것을 언급하는 것links.

API 응답을 이러한 형태로 가져오려면 정규화를 사용합니다.서버 액션내의 엔티티가 정규화되면, 그것들을 현재의 상태로 Marge 하는 간단한 리듀서를 작성할 수 있습니다.

import merge from 'lodash/object/merge';

function entities(state = { items: {}, links: {} }, action) {
  if (action.response && action.response.entities) {
    return merge({}, state, action.response.entities);
  }

  return state;
}

이러한 접근 방식의 데모는 Redux의 예를 참조하십시오.

React의 불변성 도우미는 변환 없이 오래된 JavaScript 객체의 업데이트 버전을 만들 수 있는 편리한 방법입니다.

업데이트해야 하는 소스 개체와 업데이트해야 하는 조각 및 변경에 대한 경로를 설명하는 개체를 제공합니다.

예를 들어, 어떤 행동이id그리고.link프로퍼티와 그 프로퍼티에서link를 사용하여 키 입력된 항목의 일련의 링크에 액세스합니다.id:

var update = require('react/lib/update')

// ...

return update(state, {
  items: {
    [action.id]: {
      links: {$push: action.link}
    }
  }
})

(예에서는 ES6 계산 속성명을 사용하고 있습니다).action.id)

언급URL : https://stackoverflow.com/questions/32135779/updating-nested-data-in-redux-store