Redux toolkit
리덕스를 더 편하고 간결하게 쓰기 위한 기능을 가진 것.
기존 리덕스의 구조와 패러다임이 같다.
코드의 양을 줄이기 위해 API가 추가되었고 보다 자동화되었다.
리덕스 공식문서: 링크텍스트
Redux Toolkit은 Redux에 대해 흔히 우려하는 세 가지를 해결하기 위해 만들어졌습니다.
1. 저장소를 설정하는 것이 너무 복잡하다
2. 쓸만하게 되려면 너무 많은 패키지들을 더 설치해야 한다.
3. 보일러플레이트 코드를 너무 많이 필요로 한다.
모든 경우를 해결할 수야 없지만, create-react-app와 apollo-boost처럼 대부분의 경우를 다뤄주고 내려야 하는 결정을 줄여주는
공식 도구를 제공하기로 했습니다.
Redux Toolkit은 저희가 추천하는 모범 사례를 통해 기본 동작을 제공하고, 실수를 줄여주고, 더 간단한 코드를 작성하게 해 줍니다.
이를 통해 좋은 Redux 앱을 쉽고 빠르게 개발할 수 있게 해 줍니다.Redux Toolkit에 포함된 것들
configureStore(): createStore를 감싸서 쓸만한 기본값들과 단순화된 설정을 제공합니다. 여러분의 리듀서 조각들을 자동으로 합쳐주고, 기본 제공되는 redux-thunk를 포함해서 여러분이 지정한 미들웨어들을 더해주고,
Redux DevTools 확장을 사용할 수 있게 합니다.
createReducer(): switch 문을 작성하는 대신, 액션 타입과 리듀서 함수를 연결해주는 목록을 작성하도록 합니다. 여기에 더해 immer 라이브러리를 자동으로 사용해서, state.todos[3].completed = true와 같은 변이 코드를 통해 간편하게 불변 업데이트를 할 수 있도록 합니다.
createAction(): 주어진 액션 타입 문자열을 이용해 액션 생산자 함수를 만들어줍니다. 함수 자체에 toString() 정의가 포함되어 있어서, 타입 상수가 필요한 곳에 사용할 수 있습니다.
createSlice(): 조각 이름과 상태 초기값, 리듀서 함수들로 이루어진 객체를 받아 그에 맞는 액션 생산자와 액션 타입을 포함하는 리듀서 조각을 자동으로 만들어줍니다.
createAsyncThunk: 액션 타입 문자열과 프로미스를 반환하는 함수를 받아, pending/fulfilled/rejected 액션 타입을 디스패치해주는 thunk를 생성해줍니다.
createEntityAdapter: 저장소 내에 정규화된 데이터를 다루기 위한 리듀서와 셀렉터를 만들어줍니다.
createSelector 유틸리티를 Reselect 라이브러리에서 다시 익스포트해서 쓰기 쉽게 해줍니다.
참고 코드
// counterSlice.js의 Slice 구조
const counterSlice = createSlice({
name: "counter",
initialState,
reducers: {
// 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자, 액션크리에이터가 된다.
addNumber: (state, action) => {
state.number = state.number + action.payload;
},
minusNumber: (state, action) => {
state.number = state.number - action.payload;
},
},
});reducer만 만들어 주면 그 안의 함수가 Action value, Action creator가 됨
리듀서 내부 함수가 늘어날 때마다 export 해주면 된다.
