TIL 30th - Redux Toolkit (Store SetUp)

React - Redux Toolkit 의 API 를 참고하면, 크게 3가지로 나누어져 있다. 

 

 

1. Store Setup

2. Reducers and Actions

3. Other

 

API에 따르면 Store Setup 단계는 

 

1. Store Setup 

• configureStore
  • 표준 Redux createStore 기능의 익숙한 추상화로, 보다 나은 개발 환경을 위해 스토어 설정에 좋은 기본값을 추가합니다.
• getDefaultMiddleware
  • 기본 미들웨어 목록을 포함하는 배열을 반환합니다.
• Immutability Middleware
  • Redux Toolkit과 함께 사용하기 위해 사용자 지정된 Redux 불변 상태 미들웨어의 포트입니다. 발견된 모든 돌연변이는 오류로 간주됩니다.
    이 미들웨어는 configureStore 및 getDefaultMiddleware에 의해 스토어에 기본적으로 추가됩니다.
    지원되는 옵션 중 하나를 getDefaultMiddleware의 변경 불가능한 Check 값으로 전달하여 이 미들웨어의 동작을 사용자 정의할 수 있습니다.
• Serializability Middleware
  • 직렬화할 수 없는 값이 상태 또는 디스패치된 작업에 포함되었는지 여부를 탐지하는 사용자 정의 미들웨어로, 중복-불변-상태-불변을 본떠서 모델링합니다. 탐지된 직렬화 불가능한 값은 콘솔에 기록됩니다.
    이 미들웨어는 configureStore 및 getDefaultMiddleware에 의해 스토어에 기본적으로 추가됩니다.
    지원되는 옵션 중 하나를 getDefaultMiddleware의 serializableCheck 값으로 전달하여 이 미들웨어의 동작을 사용자 정의할 수 있습니다.
• createListenerMiddleware
  • 추가 로직을 포함하는 "효과" 콜백을 포함하는 "수신기" 항목을 정의하고, 발송된 작업 또는 상태 변경을 기반으로 콜백을 실행할 시기를 지정하는 방법을 사용할 수 있는 Redux 미들웨어입니다.
    이것은 사가나 관찰 가능한 것과 같은 더 널리 사용되는 레덱스 비동기 미들웨어의 가벼운 대안이 되기 위한 것이다. 복잡성 및 개념 수준에서 thunk와 유사하지만 일부 일반적인 사가 사용 패턴을 복제하는 데 사용할 수 있다.
    개념적으로, 구성 요소 속성/상태 업데이트 대신 Redux 스토어 업데이트에 응답하여 논리를 실행한다는 점을 제외하고는 React의 useEffect 후크와 유사하다고 생각할 수 있습니다.
    수신기 효과 콜백은 think와 유사하게 디스패치 및 getState에 액세스할 수 있습니다. 수신기는 또한 take, condition, pause, fork, unsubscribe와 같은 비동기 워크플로우 기능을 수신하므로 더 복잡한 비동기 논리를 작성할 수 있습니다.
    수신기는 설정 중에 listenerMiddleware.startListening()을 호출하여 정적으로 정의하거나, 특별한 디스패치(addListener() 및 디스패치(removeListener() 액션을 사용하여 런타임에 동적으로 추가 및 제거할 수 있습니다.
• autoBatchEnhancer
  • 하나 이상의 "낮은 우선순위" 발송 작업을 한 줄로 찾고, 지연 시 가입자 알림을 실행하기 위해 콜백을 대기하는 Redux 스토어 향상 프로그램입니다. 그런 다음 대기 중인 콜백이 실행될 때 또는 다음 "일반 우선순위" 작업이 발송될 때 먼저 가입자에게 알립니다.

 

우선 이중에서 Store Setup부터 시작하겠다.