상태 관리 라이브러리 - Redux (4. 기타 기능)

Zombie Children Issue

react-redux에는 zombie children이라는 버그가 발생할 수 있다. 이는 부모-자식간 컴포넌트의 render 순서와, store의 상태에 따라 selector에서 발생할 수 있는 에러이다. 최신 버전에서는 그나마 해결되었지만, 발생할 수 있는 극단적인 몇가지의 경우가 있으며 이를 인지할 수 있도록 redux는 문서화하여 정보를 알려주고 있다.

Redux Toolkit Query

redux-toolkit 에서는 데이터 패칭 기능도 지원한다. 데이터 패칭이란 서버에서 데이터를 가져오는 과정을 의미한다. 이 라이브러리는 Redux를 기반으로하며, 일반적으로 비동기 데이터를 가져오고 캐시하는 작업을 단순화해주는 기능을 지원한다.

이에 대표되는 데이처 패칭 전문 라이브러리는 Apollo Client, React Query, SWR 등이 있으며
RTK Query 도 여기에서 영감을 받아 제작되었다. 사용법을 간단히 요약하자면, rtk에서 createAsyncThunk를 사용해 첫번 째 인자에는 api 주소, 두번 째 인자에는 비동기 처리를 해준다

export const fetchIncrement = createAsyncThunk(
    '/counter/fetchIncrement',
    async (value) => {
        const response = await axios.put('/counter/fetchIncrement', { value: value });
        return response.data;
    }
);

그 다음 slice에 extraReducer 필드를 다음과 같이 추가해준다

extraReducers: (builder) => {
    builder
      .addCase(fetchIncrement.pending, (state) => {
      state.status = 'loading';
    })
      .addCase(fetchIncrement.fulfilled, (state, action) => {
      state.status = 'idle';
      state.value = action.payload.value;;
    })
      .addCase(fetchIncrement.rejected, (state) => {
      state.status = 'failed';
    })
}

이후 컴포넌트에서 사용법은 기존과 동일하다.

하지만 RTQ Query는 강력하고 기능이 많기에 무겁다는 단점도 있다. 그리고 각각의 라이브러리들의 사용 목적을 세분화하여 사용하는 것이 유지보수와 디버깅에도 좋기에 RTK Query 말고 swr이나 react-query 같은 다른 데이터 패칭 라이브러리를 권장하는 바이다.