Redux, Redux toolkit, Redux thunk

Redux, Redux toolkit, Redux thunk란?

Redux는 React 애플리케이션에서 상태를 효율적으로 관리하기 위한 도구이다. 

Redux Toolkit은 Redux의 사용을 보다 쉽고 간편하게 만들어주는 공식적인 Redux 라이브러리이다. 

Redux Thunk는 Redux 미들웨어의 한 종류로 Redux Thunk를 사용하면 Redux 액션 생성자 함수에서 비동기 작업을 처리할 수 있다.

 

즉 Redux는 상태관리도구이며, Redux Toolkit은 Redux의 사용을 쉽게 해주는 라이브러리., Redux Thunk는 Redux에서 비동기 작업을 처리하기 위한 미들웨어이다. 

 

Redux를 사용한 예시

// 액션 타입 정의
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// 액션 생성자 함수
const increment = () => ({ type: INCREMENT });
const decrement = () => ({ type: DECREMENT });

// 초기 상태
const initialState = {
  count: 0
};

// 리듀서 함수
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    case DECREMENT:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

 

Redux Toolkit을 사용한 예시

import { createSlice } from '@reduxjs/toolkit';

// 초기 상태
const initialState = {
  count: 0
};

// slice 생성
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: state => {
      state.count += 1;
    },
    decrement: state => {
      state.count -= 1;
    }
  }
});

// 액션 생성자 함수 추출
export const { increment, decrement } = counterSlice.actions;

// 리듀서 함수 추출
export default counterSlice.reducer;

 

Redux Toolkit을 사용한 코드가 훨씬 간결하고 중복될 수 있는 부분을 줄여주는 것을 볼 수 있다.

Redux Toolkit에서는 createSlice 함수를 사용하여 액션 생성자 함수와 리듀서 함수를 함께 정의할 수 있다.

 

redux와 redux toolkit은 상태관리가 이루어지는 과정은 동일하더라도 redux toolkit을 활용하면 훨씬 더 간결하고 간편하게 정의할 . 수있다.

 

 

Redux Thunk?

리덕스에서는 비동기 작업을 처리하기 위해서는 미들웨어(redux-thunk,redux-saga)를 사용해야한다.

 

기존의 리덕스는 동기적인 흐름으로 동작한다

(액션 객체 생성 → 액션이 발생하면 디스패치가 이를 스토어에 알리고 → 리듀서가 정해진 로직에 의해 액션 처리후 새로운 상태값 반환 )

⇒ 하지만 외부 데이터를 요청해서 그에 따른 응답을 화면에 보여주거나, 시간을 딜레이시킨다던지 이러한 경우에는 동기적인 흐름만으로는 처리하기 힘들다

=> 따라서 리덕스를 사용하면서 비동기 작업을 처리하기 위해서는 미들웨어가 필요하다

 

이러한 미들웨어로 redux-thunk를 사용하게 된다. 

 

이 부분을 좀 더간편하게 만들어주는 상태관리 툴이 있는데 그것이 react-query이다. 

 

https://in-my-universe23.tistory.com/entry/React-Query

React Query