redux toolkit
redux toolkit은 redux 로직을 작성하기 위한 공식 권장 접근 방식입니다.
redux 코어를 둘러 싸고 있으며 redux앱을 빌드하는 데 필수적이라고 생각하는 패키지와 기능이 포함되어 있습니다.
redux toolkit은 제안된 모범 사례를 기반으로 하여 대부분의 redux 작업을 단순화하고 일반적인 실수를 방지하고 redux app을 더 쉽게 작성할 수 있도록 합니다.
redux toolkit 공식문서: https://redux-toolkit.js.org/tutorials/quick-start
redux toolkit과 기존 redux 비교
| 기존 redux | toolkit | |
| store생성 | createStore | configureStore |
| action생성 | 상수와 생성자 함수를 분리 선언 | 상수와 생성자 함수를 createAction 하나로 처리 |
store생성
기존 redux방식: const store = createStore(rootReducer)
redux toolkit방식: const store = configureStore({reducer: rootReducer})
action생성
左) 기존 redux방식.
右) redux toolkit방식.
createAction은 type만 넣으면 자동으로 해당 type을 가진 action creator함수를 생성합니다.
생성된 함수를 호출할 때 인수를 추가로 넣어준다면 이 값은 payload 프로퍼티의 값으로 들어가게 됩니다.
reducer생성
左) 기존 redux방식.
右) redux toolkit방식.
createReducer에서 action을 처리하기 위해 case reducer를 정의하는 두 가지 다른 형태인 builder callback 표기법과 map object 표기법을 지원합니다. 둘 다 동일하지만 TypeScript의 호환성을 위해 builder callback표기법이 선호됩니다.
① builder callback → createReducer(initialState, builderCallback)
| builder.addCase(actionCreator, reducer) : 액션 타입과 정확히 맵칭되는 case reducer를 추가하여 액션을 처리합니다. addMatcher 또는 addDefaultCase 메소드 보다 먼저 작성되어야 합니다. |
| builder.addMatcher(matcher, reducer) : 새로 들어오는 모든 액션에 대해서 주어진 패턴과 일치하는지 확인하고 reducer를 실행합니다. |
| builder.addDefaultCase(reducer) : 다른 case reducer나 matcher reducer가 실행되지 않았다면, 기본 case reducer가 실행됩니다. |
| actionCreator : plain action type 문자열이거나 action type을 결정하는데 사용할 수 있는 createAction에 의해 생성된 action creator입니다. |
| reducer : reducer function입니다. |
| matcher : a matcher function입니다. |
② map object → createReducer(initialState, actionMap, actionMatchers, defaultCaseReducer)
| initialState : reducer를 처음 호출할 때 사용해야 하는 초기 상태 값입니다. |
| actionsMap : 액션 타입이 case reducer에 맵핑되어 있는 객체입니다. |
| actionMatchers : {matcher, reducer}형식으로 정의된 배열입니다. case reducer가 일치 여부에 관계없이 모든 일치하는 reducer가 순서대로 실행됩니다. |
| defaultCaseReducer : 이 작업에 대해 case reducer 및 matcher reducer가 실행되지 않은 경우 실행되는 기본 케이스 reducer입니다. |
Prepare 콜백함수를 사용해서 Action Contents 커스터마이즈 하기
일반적으로 액션 생성자 함수를 호출해서 액션을 생성할 때는 단일 인자를 받아서 action.payload값을 생성합니다.
payload에 사용자 정의 값을 추가하고 싶다면 prepare callback함수를 이용하면 됩니다.
왼쪽처럼 prepare콜백함수를 이용하면 오른쪽 결과가 나옵니다.
createSlice()
이 API는 redux logic을 작성하기 위한 표준 접근 방식입니다.
createSlice 내부에서는 createAction과 createReducer를 사용하고 있습니다.
createSlice 함수는 reducer함수의 대상인 초기 상태(initialState)와 "slice이름"을 받아 reducer와 상태에 해당하는 액션 생성자와 액션 타입을 자동으로 생성하는 함수입니다.
extraReducers
extraReducers를 사용하면 createSlice가 생성한 action type외에 다른 action type에 응답할 수 있습니다.
extraReducers로 지정된 case reducer는 외부 액션을 참조하기 위한 것이므로, 그들은 slice.actions에서 생성된 액션을 가지지 않을 것입니다.
createAsyncThunk
createAction의 비동기 버전입니다.
function createAsyncThunk(type, payloadCreator, options)payloadCreator은 Promise를 반환하는 콜백 함수입니다.
type은 비동기 요청의 생명 주기를 나타내는 추가 redux action type상수를 생성하는 데 사용되는 문자열입니다.
thunkAPI는 일반적으로 redux thunk함수에 전달되는 모든 매개변수와 추가 옵션을 포함하는 객체입니다.
| thunkAPI에 들어 있는 properties |
| dispatch : redux 스토어 dispatch 메소드 |
| getState : redux 스토어 getState 메소드 |
| extra : 설정 시 thunk middleware에 제공되는 추가인수(사용 가능한 경우) |
| requestId : 요청을 식별하기 위해 자동으로 생성된 고유 문자열 ID값 |
| signal : 앱 로직의 다른 부분이 이 요청을 취소가 필요한 것으로 표시했는지 확인하는데 사용할 수 있는 AbortController.signal 객체입니다. |
| rejectWithValue(value, [meta]) : rejectWithValue는 정의된 payload 및 meta와 함께 거부된 응답을 반환하기 위해 작업 생성자에서 반환(또는 throw)할 수 있는 utility함수입니다. 그것은 어떤 값을 주든 전달하고 거부된 작업의 payload에 반환합니다.meta도 전달하면 기존의 rejectAction.meta와 병합됩니다. |
| fullfillWithValue(value, meta) : fullfillWithValue는 fullfilledAction.meta에 추가할 수 있는 기능을 가지고 있는 동안 값으로 이행하기 위해 작업 생성자에서 반환할 수 있는 utility함수입니다. |
cancellation
① thunk 실행 중 취소하기
thunk가 실행 중에 중지가되면 thunkName/rejected action이 dispatch되게 됩니다.
② abort 이벤트 발생 시 request 도 취소하기
thunk 실행이 중지가 되고 rejected action이 dispatch되었지만 http request는 계속 실행됩니다.
이것마저 중단하려면 AbortController()를 사용하면 됩니다.
AbortController
AbortController interface의 signal 읽기 전용 프로퍼티는 DOM 요청과 통신하거나 취소하는데 사용하는 AbortSignal 객체 interface를 반환합니다.
AbortController.signal 공식문서: https://developer.mozilla.org/ko/docs/Web/API/AbortController/signal
