React/Redux : '마스터'응용 프로그램 상태를 어디에 추가 + 작성합니까?

Question

Reux 응용 프로그램에서 Redux를 사용하기 시작했는데 정확한 '마스터 상태 디자인'이 사용되는 부분을 이해하는 데 문제가 있습니다.

맥락에서 나는 앱 상태를 거대한 나무로 생각하고 있습니다. 나무의 작은 부분을 처리하는 감속기가 있습니다. 저는 상태 트리를 표현하는 방법에 대해 약간의 생각을했습니다. 그리고 변수 인 initialState은 기본적으로 내 앱 상태의 다양한 부분을 포함하는 자식 개체가있는 Immutable.js 객체입니다.

필자는 내 감속기를 앱의 여러 부분에 매핑하도록 분할했지만 거대한 주 상태 트리가 어떻게 생성되는지 이해하는 데 문제가 있습니다. 나는 각각의 감속기가 전체 상태 트리 + 액션을 취해 액션에 기반한 새로운 상태를 반환한다는 것을 알았지 만 감속기에 들어온 상태가 undefined 인 경우 '초기 상태'를 어디에 배치해야하는지 이해하지 못합니다.

다른 말로하면 : 원래 상태가 정의되지 않은 경우 전체 상태 트리를 작성하는 책임이있는 단일 감속기가 있습니까 (그렇다면 그 감속기가 어디에 있어야합니까?)? 아니면 하나의 감속기가 initialState 변수에 정의되지 않은 상태 인수를 할당해야합니까?

Answer 1

combineReducers을 사용하는 경우 "루트"를 만들 필요가 없습니다. combineReducers에 의해 반환 된 함수는 그 자체로 감속기이며 전달 된 각 감속기에 대한 "분기"(속성)가있는 상태 트리의 루트를 자동으로 만듭니다. 감속기는 다음과 같이 자신의 분기를 초기화하는 것에 대해 걱정할 필요가 있습니다. 초기 상태

combineReducers을 사용하지 않는 경우 각 감속기가 작동하는 상태 트리 부분에 대해서만 걱정해야한다고 생각합니다. 이것을 하나의 "마스터"감속기로 옮기면 불필요하게 관련 코드가 분리되어 앱이 추론하기가 더 어려워집니다.

Answer 2

예제에 표시된대로 official guide 초기 상태가 될 감속기의 첫 번째 인수에 기본값을 사용할 수 있습니다.

function todoApp(state = initialState, action) { 
    switch (action.type) { 
    case SET_VISIBILITY_FILTER: 
     return Object.assign({}, state, { 
     visibilityFilter: action.filter 
     }) 
    case ADD_TODO: 
     return Object.assign({}, state, { 
     todos: [ 
      ...state.todos, 
      { 
      text: action.text, 
      completed: false 
      } 
     ] 
     })  
    default: 
     return state 
    } 
} 

이 초기 상태는 클라이언트 코드에 하드 코딩 된 기본값이 될 수 있습니다. 또는 서버가 HTML 페이지로 부트 스트랩 한 일부 데이터 일 수 있습니다. 예를 들어 서버에 렌더링 된 EJS 템플릿에서 다음을 가질 수 있습니다.

<script> 
window.INITIAL_STATE = <%= JSON.stringify(initialState) %> 
</script>