Redux-핵심 개념

응용 프로그램의 상태가 다음과 같은 일반 객체로 설명된다고 가정 해 보겠습니다. initialState 다음과 같습니다-

const initialState = {
   isLoading: false,
   items: [],
   hasError: false
};

애플리케이션의 모든 코드는이 상태를 변경할 수 없습니다. 상태를 변경하려면 액션을 전달해야합니다.

액션이란 무엇입니까?

작업은 유형 속성으로 변경하려는 의도를 설명하는 일반 개체입니다. 수행중인 작업 유형을 알려주는 유형 속성이 있어야합니다. 행동 명령은 다음과 같습니다-

return {
   type: 'ITEMS_REQUEST', //action type
   isLoading: true //payload information
}

작업과 상태는 Reducer라는 함수에 의해 함께 유지됩니다. 변경을 유발할 의도로 조치가 발송됩니다. 이 변경은 감속기에 의해 수행됩니다. Reducer는 Redux에서 상태를 변경하는 유일한 방법으로, 더 예측 가능하고 중앙 집중화되고 디버깅 가능합니다. 'ITEMS_REQUEST'작업을 처리하는 감속기 함수는 다음과 같습니다.

const reducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}

Redux에는 애플리케이션 상태를 보유하는 단일 저장소가 있습니다. 데이터 처리 로직을 기반으로 코드를 분할하려면 Redux에 저장하는 대신 리듀서 분할을 시작해야합니다.

이 튜토리얼의 뒷부분에서 리듀서를 분할하고 저장소와 결합하는 방법에 대해 논의 할 것입니다.

Redux 구성 요소는 다음과 같습니다-