[TIL] redux-toolkit

redux-toolkit

• 사용 이유
  redux를 아무 라이브러리 없이 사용할 때 너무 많은 코드가 생성되어서 redux-actions라는 것을 사용하게 되고, 불변성을 지켜야하는 원칙 때문에 immer를 사용하게되고, store 값을 효율적으로 핸들링하여 불필요한 리렌더링을 막기 위해 reselect를 쓰게 되었고, 비동기를 수월하게 하기 위해, thunk나 saga를 설치하여 redux를 더 효율적으로 사용하게 된다.

그런데 redux-toolkit은 redux가 공식적으로 만든 라이브러리이며, saga를 제외한 위의 모든 기능을 지원한다.

redux-toolkit

• 리덕스 툴킷은 퓨어리덕스를 개량한 것으로 생각하면 된다. 리덕스가 코드의 양이 많다는 개발자들의 불만을 수용해 코드는 더 적고 더 편하게 쓰기위해 기능들을 흡수해서 만든 것이 리덕스툴킷이다.

configureStore

• configureStore 함수는 리덕스 라이브러리의 createStore 함수를 추상화 한 것이다. 기존의 번거로웠던 리덕스 설정을 간편하게 할 수 있도록 해주고 설정시 디폴트로 redux-thunk와 DevTools를 제공해준다.

import { configureStore } from '@reduxjs/toolkit'

import rootReducer from './reducers'

const store = configureStore({ reducer: rootReducer })

위처럼 선언하면 기본 미들웨어로 redux-thunk를 추가하고 개발 환경에서 리덕스 개발자 도구를 활성화 해준다.

createReducer

• 상태에 변화를 일으키는 리듀서 함수를 생성하는 유틸 함수

const todosReducer = createReducer(state = [], (builder) => {
  builder.addCase('UPDATE_VALUE', (state, action) => {
    const {someId, someValue} = action.payload;

    state.first.second[someId].fourth = someValue;
  })
})

• createReducer의 콜백 함수 인자로 주어지는 builder 객체는 addCase, addMatcher, addDefaultCase라는 메서드를 제공한다. 그리고 각 함수에서 액션을 리듀서에서 어떻게 처리할지를 정의할 수 있다.
  작성하는 방법은 각 라인마다 빌더 메서드를 나누어 호출하거나 체이닝(chaining) 형태로 작성하는 것입니다.

// 각 라인마다 빌더 메서드를 나누어 호출
const counterReducer = createReducer(initialState, (builder) => {
  builder.addCase(increment, (state) => {})
  builder.addCase(decrement, (state) => {})
})

// 또는 메서드 호출을 연결하여 연속적으로 작성
const counterReducer = createReducer(initialState, (builder) => {
  builder
    .addCase(increment, (state) => {})
    .addCase(decrement, (state) => {})
})

createSlice

const alertSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {},
	extraReducers: (builder) => {}
});

• createSlice에 선언된 슬라이스 이름을 따라서 리듀서와 그리고 그것에 상응하는 액션 생성자와 액션 타입을 자동으로 생성한다. 따라서 createSlice를 사용하면 따로 createAction, createReducer를 작성할 필요가 없다.

createAsyncThunk

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)

    return response.data
  }
)

• createAction의 비동기 버전을 위해서 제안되었다.
• 반드시 서버와 통신이 이루어지는 구간에서만 사용되어야 하는 것은 아닙니다. 비즈니스 로직을 비동기 형태로 구현할 때에도 응용할 수 있습니다.

createSelector

• 리덕스 스토어 상태에서 데이터를 추출할 수 있도록 도와준다.

const users = useSelector((state) => state.users)

createSelector함수가 메모이제이션될 때에만 계산하도록 동작한다.

컴포넌트의 구현부에 작성된 인라인 useSelector 훅은 스토어를 자동으로 구독하고 있기 때문에 상태 트리가 갱신되어 컴포넌트를 다시 render 해야 되는 경우 매번 새로운 인스턴스를 생성하게 된다.