[React] redux-toolkit 설치 및 사용방법(ConfigureStrore, createAsyncThunk)

redux-toolkit

: redux에서 공식적으로 지원하는 redux 개발 도구입니다. 

 

아래의 4개의 함수에 대해서 정리합니다.

• createAction
• createReducer
• createSlice
• creatAsyncThunk

참고 글: Redux Toolkit

https://redux-toolkit.js.org

 

■ 설치방법

1. 프로젝트 생성 시 설치하기

  - create-react-app 으로 프로젝트 생성 시, template 옵션에 redux를 추가하면 됩니다.

npx create-react-app my-app --template redux

2. 기존 프로젝트에 추가하기

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

 

■ ConfigureStrore

기존 createStore를 사용해서 store 생성

 - composeWithDevTools로 applyMiddleware를 추가해줘야 합니다.

    const store = createStore(reducers, composeWithDevTools(applyMiddleware([...middlewares])));

 

configureStore를 사용해서 store 생성

 - 별도의 메서드 없이 바로 미들웨어를 추가할 수 있습니다.

const store = configureStore({
  reducer : ruducers, // 리듀서 정의
  middleware: [...middlewares], // 미들웨어 정의
  devTools: false, // devTool의 옵션을 선택 - default는 true.
})

 

devTool 옵션은 아래에서 확인하시면 됩니다.

 

참고 글: configureStore

https://redux-toolkit.js.org/api/configureStore

 

■ createAsyncThunk

참고 글: Redux Toolkit의 createAsyncThunk로 비동기 처리하기

https://velog.io/@raejoonee/createAsyncThunk

 

위 참고 글로는 createAsyncThunk에 대한 이해가 어려웠습니다. (이해력 부족. ㅠㅠ)

 

저처럼 이해가 안되시는 분들은 아래의 유튜브 강좌를 보시기 바랍니다.

 

<생활코딩님의 Redux toolkit 강좌>