Redux Thunk 미들웨어 사용해보기

1. Thunk란?

리덕스의 액션에서 비동기 처리를 할 수 있게 해준다.

 

2. 사용법

리덕스 설치 및 thuck 설치

npm install @reduxjs/toolkit react-redux
npm install redux-thunk

 

store에 추가 해주기

import { applyMiddleware, legacy_createStore as createStore } from 'redux';
import { reducer } from '../Reducers';
import ReduxThunk from 'redux-thunk';

const store = createStore(reducer, applyMiddleware(ReduxThunk));

export default store;

 

thunk를 사용하면 액션에서 비동기 처리가 가능해진다.

import axios from 'axios';

// 기본적으로 액션은 객체 반환
export const Read = (data) => {
  return {
    type: 'READ',
    payload: data,
  };
};

// 비동기 처리 가능해짐
export const getData = () => {
  return function (dispatch) {
    axios
      .get('https://jsonplaceholder.typicode.com/todos')
      .then((res) => {
        const data = res.data.slice(0, 5);
        dispatch(Read(data));
      })
      .catch((error) => {
        console.log(error);
      });
  };
};

 

디스패치 사용 시

  useEffect(() => {
    dispatch(getData());
  }, []);

 

마치며..

리덕스 사용하다보니 조금은 리덕스의 진행절차가 암기되는 것 같다. 역시 반복만이 답인가보다.

 

참고

https://react.vlpt.us/redux-middleware/04-redux-thunk.html

4. redux-thunk · GitBook