[React] React-thunk 알아보기

redux-thunk?

리덕스에 관해서 공부하다 보면 '미들웨어'라는 것을 한 번쯤 들어보았을 것이다.

redux-thunk, redux-saga, 그 외에도 redux-promise-middleware 등 여러 가지가 있는데 오늘은 그중에서도 가장 많이 사용되고 있는 라이브러리 중 하나인 redux-thunk에 대하여 정리해보려 한다.

 

 

리덕스 미들웨어?

먼저 미들웨어에 대해서 알아볼까 한다.

리덕스를 사용해보았다면 위와 같은 구조로 리덕스가 새로운 state를 반환한다는 것을 알고 있을 것이다.

dispatch를 통해 리듀서로 전달된 액션이 리듀서로 전달되어 state가 변경된다는 것!

리덕스 미들웨어는 여기서 액션이 디스패치되고 리듀서에 전달되기 전에 추가적인 작업을 진행할 수 있다.

 

보통 서버와 통신하며 비동기작업을 위해 사용하는 경우가 많다.

위에 언급한 미들웨어들도 모두 비동기 작업에 관련된 라이브러리들이다.

그럼 이제 미들웨어가 뭔지 알았으니 구체적으로 redux-thunk에 대해 알아보자.

 

 

 

redux-thunk

비동기 작업 처리에 가장 많이 이용하는 미들웨어인 thunk의 가장 큰 특징은 액션 객체가 아닌, 함수를 dispatch 할 수 있다.
여기서의 dispatch 하는 함수를 thunk 함수라고 한다.

thunk 함수를 생성할 때는 createAsyncThunk 라는 함수를 이용한다.
이 함수에는 두 개의 인자가 들어가는데, 첫 번째는 action value, 두 번째는 함수가 들어간다. 처리해야 할 작업이 있다면 두 번째 인자의 함수에서 작성하면 된다.

 

 

카운터를 증가시키는 아래 함수는 3초 후에 thunk 함수 내부에서 dispatch를 실행한다.
코드를 보면 알겠지만, 두 번째 함수에서는 payload와 thunkAPI 인자를 사용할 수 있다.
payload는 컴포넌트에서 보낸 payload 이고, thunkAPI는 thunk가 제공하는 여러 API를 이용할 수 있다.

export const __addNumber = createAsyncThunk('addNumber', (payload, thunkAPI) => {
  setTimeout(() => {
    thunkAPI.dispatch(addNumber(payload));
  }, 3000);
});

thunk 함수의 사용은 컴포넌트 안에서의 기본 리듀서의 action creator를 사용하는 방식과 동일하다.

 

 

 

thunk로 Promise 핸들링

thunkAPI를 통해서 Promise를 다룰 수 있다. (Promise는 비동기 처리를 다루기 위해 사용되는 객체!)
요청이 성공한 경우 dispatch 하는 fulfillWithValue, 실패했을 경우 dispatch 하는 rejectWithValue 같은 API들로 thunk 함수 내부에서 dispatch 할 수 있다.

export const __getTodos = createAsyncThunk('todos/getTodos', async (payload, thunkAPI) => {
  try {
    const data = await axios.get('http://localhost:3001/todos');
    return thunkAPI.fulfillWithValue(data.data);
  } catch (error) {
    return thunkAPI.rejectWithValue(error);
  }
});

 

 

위 코드만 봐서는 어떤 리듀서에게 dispatch를 전달해주는지 알 수 없다.
리듀서에 thunk 함수를 추가할 때, thunk 함수는 Reducers 외부에서 작성된 것이기 때문에 extraReducers를 사용해야 한다.

아래의 코드는 반환된 Prmomise인 로딩상태(pending, fulfilled, rejected)에 따라서 상태를 관리하고 있다.

위의 thunk 함수에서 fulfillWithValue 되었다면 extraReducers의 [__getTodos.fulfilled] 부분으로 dispatch가 전달된다.

export const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {},
  extraReducers: {
    [__getTodos.pending]: (state) => { // 로딩중일 때
      state.isLoading = true;
    },
    [__getTodos.fulfilled]: (state, action) => { // 성공했을 때
      state.isLoading = false;
      state.todos = action.payload;
    },
    [__getTodos.rejected]: (state, action) => { // 실패했을 때
      state.isLoading = false;
      state.error = action.payload;
    },
  },
});

좀 더 공부해봐야겠지만 redux-thunk를 이용해서 리덕스에서의 비동기 작업을 좀 더 편하게 처리할 수 있을 것 같다!