Redux toolkit 을 React에 적용하기 ep.1 (설치 및 api 설명)

YANGHYUK·2021년 4월 2일
0

공식문서 참고
https://redux-toolkit.js.org/introduction/getting-started[링크텍스트](https://redux-toolkit.js.org/introduction/getting-started)

맨날 redux랑 redux-saga를 접합하여 쓰다가 container와 component 및 module,saga 구조로 코드를 짜다보니 코드를 쓸 양이 방대해지기도 하고 이제 질리기도 하여 .. 핫하다는 redux-toolkit을 사용해보기로 함!

우선 react를 띄웠다고 가정하고 시작!

redux-toolkit 설치 명령어

#npm
npm install @reduxjs/toolkit

#yarn
yarn add @reduxjs/toolkit

redux-toolkit이 가지고 있는 api

import {configureStore, createReducer, createAction, createSlice, createAsyncThunk, createEntityAdapter, createSelector} from "@reduxjs/toolkit"

1. configureStore :  슬라이스 리듀서를 자동으로 결합하고 제공하는 Redux 미들웨어를 추가하고, 기본적으로 redux-thunk를 포함하며 Redux DevTools Extension을 사용할 수 있게 해줌 ( configureStore 자체가 내장이 되어있다니! )
2. createReducer : switch문 없이 알아서 action과 reducer를 감지해준다. (immer자체가 내장이 되어있다!! 와우)
3. createAction : action type을 받아서 action을 발생시킨다.
4. createSlice : reducer, initialState, slice이름을 하나로 묶어서 사용가능하게 함 (리듀서 함수 세트 메뉴라고 생각하면 된다)
5. createAsyncThunk : 비동기 담당하고 있다! action type을 받아서  => promise값을 내보내고 "pending / fulfilled / rejected"를 dispatch하는 thunk를 만들어준다 
6. createEntityAdapter : store에 들어있는 data를 관리하기 위한 재사용이 가능한 reducer와 selector를 만들어준다
7. createSelector :  state값들을 사용하기 쉽게 내보내주는 역할 (영문설명: re-exported for ease of use)
profile
code runner

0개의 댓글