Redux: 질문: 리듀서의 상태에서 내부 객체의 돌연변이

에 만든 2016년 04월 15일 · 3코멘트 · 출처: reduxjs/redux

이것은 유효한 redux 감속기입니까?

function reducer(state={ byId: {}, ids: [] }, action) {
  switch (action.type) {
    case 'ADD':
      state = { ...state }
      state.byId[action.id] = action.value
      state.ids.push(action.id)
      return state

    default:
      return state
  }
}

전체 상태가 먼저 얕은 복제되므로 새 개체가 반환되지만 내부 개체는 그대로 유지되고 변경됩니다.

아니면 다음과 같이 해야 합니까?

function reducer(state={ byId: {}, ids: [] }, action) {
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        byId: {
          ...state.byId,
          [action.id]: action.value
        },
        ids: [ ...state.ids, action.id ]
      }

    default:
      return state
  }
}

첫 번째 접근 방식에서 볼 수 있는 부작용은 DevTools LogMonitor에 있습니다.

이전 상태에서 하위 노드(예: byId )를 확장하면 이전에 다른 항목이었더라도 최신 값과 동일한 값을 표시합니다.
시간 여행은 작동하지 않습니다

LogMonitor의 버그입니까 아니면 두 번째 접근 방식이 올바른 것입니까? 돌연변이 전에 state = _.cloneDeep(state) 를 추가하면 실제로 제대로 작동하여 LogMonitor가 동일한 개체를 재사용하므로 동일한 값을 증명합니다.

나머지 앱은 제대로 작동하고 @connect 보기는 올바르게 업데이트됩니다.

출처

elado

가장 유용한 댓글

후자의 예는 수행해야 하는 작업입니다. 분명히, 항목을 중첩하는 경우 다소 장황해질 수 있습니다. 추상화를 시도하는 여러 유틸리티 라이브러리가 있으며 내 Redux 라이브러리 목록의 불변 데이터 페이지에 그 중 일부가 나열되어 있습니다.

또한 감속기 구성이 도움이 됩니다.

function byId(state = {}, action) {
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        [action.id]: action.value
      }
    default:
      return state
  }
}

function ids(state = [], action) {
  switch (action.type) {
    case 'ADD':
      return [ ...state, action.id ]
    default:
      return state
  }
}

const reducer = combineReducers({
  byId,
  ids
})

gaearon 에 2016년 04월 16일

👍2

모든 3 댓글

아니요, 첫 번째 예는 상태를 절대적으로 변경하는 것입니다. 초기 얕은 복사는 새 개체를 만들지만 새 개체는 원본과 동일한 byId 및 ids 참조를 가리킵니다. 따라서 byId[action.id] = action.value 및 ids.push(action.id) 하면 원래 항목이 변경됩니다.

후자의 예는 수행해야 하는 작업입니다. 분명히, 항목을 중첩하는 경우 다소 장황해질 수 있습니다. 추상화를 시도하는 여러 유틸리티 라이브러리가 있으며 내 Redux 라이브러리 목록의 불변 데이터 페이지에 그 중 일부가 나열되어 있습니다.

Redux FAQ에는 변경 불가능하게 상태를 올바르게 업데이트하는 방법에 대한 질문도 있습니다. http://redux.js.org/docs/FAQ.html#react -not-rerendering .

markerikson 에 2016년 04월 15일

👍1

후자의 예는 수행해야 하는 작업입니다. 분명히, 항목을 중첩하는 경우 다소 장황해질 수 있습니다. 추상화를 시도하는 여러 유틸리티 라이브러리가 있으며 내 Redux 라이브러리 목록의 불변 데이터 페이지에 그 중 일부가 나열되어 있습니다.

또한 감속기 구성이 도움이 됩니다.

function byId(state = {}, action) {
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        [action.id]: action.value
      }
    default:
      return state
  }
}

function ids(state = [], action) {
  switch (action.type) {
    case 'ADD':
      return [ ...state, action.id ]
    default:
      return state
  }
}

const reducer = combineReducers({
  byId,
  ids
})

gaearon 에 2016년 04월 16일

👍2

@gaearon @markerikson 감사합니다. 동적 인덱스 목록(ID별)을 관리하는 고차 감소기를 작성하게 되었습니다.

코드: https://gist.github.com/elado/95484b754f31fcd6846c7e75de4aafe4

elado 에 2016년 04월 19일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Redux: 질문: 리듀서의 상태에서 내부 객체의 돌연변이

가장 유용한 댓글

모든 3 댓글

관련 문제