Redux toolkit의 기본적인 사용법 -2- Async

TOC

1. Async의 추가

1. Async의 추가

이전 포스트에서

Async 동작을 추가해보도록 하자.

기존의 Redux에선 middleware를 만들고 내부에 thunk 혹은 saga를 사용하여 비동기 처리를 했다면
redux toolkit 기본 튜토리얼에서는 이렇게 처리하는 모습을 보여준다.

export const incrementAsync = (amount) => (dispatch) => {
  setTimeout(() => {
    dispatch(incrementByAmount(amount));
  }, 2000);
};

새롭게 추가된 reducer+action은 위와 같다. (위 문법의 정확한 용어가 대체 뭔지 모르겠다)

middleware의 3단 함수와 비슷한데 놀랍게도 2단 함수이다. 이유는 당연히 있다.
contextAPI를 사용하고 있기 때문에 모든 component에서 store의 접근이 가능하다.
(Provider 태그로 root component를 감싸고 있기 때문에)

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "../store/store";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
  rootElement
);

따라서 action을 store에서 꺼내 건네어 줄 필요가 없어졌다는 것이다.

export const incrementAsync = (amount) => (dispatch) => {
  setTimeout(() => {
console.log(store.getState().counter.count)
    dispatch(incrementByAmount(amount));
  }, 2000);
};

getState()를 통해 접근이 가능해진다.

이는 redux middleware와 같은 일을 하는 것이다.