Redux 감속기 동적 키 주입

Question

먼저 이것이 변형 된 상태 변경임을 이해합니다. 나에 대한 수치심을 안다. 때로는 올바른 방법이 가장 똑똑한 것처럼 보이지 않거나 나는 적어도 더 잘 알지 못합니다.

미리 정의 된 항목에 대해 이전 상태와 새 상태를 만들고 교환하지 않고 키를 내 상태에 삽입하지는 않겠습니다. 나는 잠시 동안 키를 주입하기 만하면되고, 그렇지 않다면 어쨌든 모두 제거됩니다.

{graphSite: {site: "default", graphBrowser: { graphID: '', graphKey:'' }, browsable:[] }}; 

내 감속기는 다음과 같습니다처럼 내 초기 상태는 ** 사용 바벨 ES7이 확산 운영자가

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
       return {...state} 
       } 

그래서이 작동하지만 것이다 오브젝트 보이는 검색 가능한 배열이 불구 상태 변화를 보여 나던 REDUX 개발 도구 도구에서 제대로

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...state.graphSite.browsable} } 
           } 
          } 

현재 검색 가능한 프로그램,하지만 이상적으로 나는 이것들이들 수 있습니다 : 그래도 난 성미에 갔기 때문에 I가 변경을 연장하는 경우 접근은 아마도이있다 너.

그래서 초기 저장 상태가 아닌 동적 키의 상태를 조작하는 가장 좋은 방법은 무엇입니까? 이것은 내가 원래 상태를 조작했기 때문에 내가 뭔가 잘못하고있는 것처럼 느껴집니다.

Answer 1

제목이 나를 혼란스럽게 만들었습니다. dynamic key injection는 나에게 너무 멋지다 : P.

어쨌든, 실제로 귀하의 browserble에 새 쌍을 추가하려고합니다. 당신은했다 : 이것은 잘못

case BROWSER: { state.graphSite.browsable[action.id] = action.payload 
      return {...state} 
      } 

직접 state 개체를 수정하기 때문에, (state 양식 감속기 매개 변수를 제공 가정).

redux의 원리 중 하나는 Changes are made with pure functions입니다. (redux 워드 프로세서).

FTFY :

case BROWSER: { 
    const nextState = JSON.parse(JSON.stringify(state)); // deep copy your state 
    nextState.graphSite.browsable[action.id] = action.payload 
    return nextState 
} 

이 가장 effecient 코드가 아닙니다은 JSON 작업이 비싸다. 상태 객체를 직접 변경하지 않는 원칙을 설명하는 것입니다.

Answer 2

좋아요, 개체의 컨텍스트에서 가변 키를 추가하는 방법과 생성 된 초기 저장소 상태가없는 것을 알 수 없습니다. 이것은 상태를 복사 한 후 첨부 된 값을 반환 한 후 매우 간단합니다. 이 두 가지가 모두 작동하여 원래 상태를 수정하지 않고 있습니다.

case BROWSER: { let browser = {...state} 
         browser.graphSite.browsable[action.id] = action.payload 
         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...browser.graphSite.browsable} 
            } 
           } 
          } 

없음 다운 투표 destructuring에 대한 권리 덕분에 나는 또한 내가이 있지만 연습을 확인하기 위해 급속 냉동 또는 불변 같은 것을 사용할 수 있습니다 실현 위대한 여기

case BROWSER: { let {graphSite: {browsable: browser}} = state 
         browser[action.id] = action.payload 

         return {...state, 
           graphSite: {...state.graphSite, 
            graphBrowser: {...state.graphSite.graphBrowser}, 
            browsable: {...browser} 
            } 
           } 
          } 

작동하지 않습니다.