Redux toolkit 세팅하기

Redux Toolkit 와 React-Redux 설치하기

📌 typescript를 기반으로 하는 새 프로젝트를 생성

yarn create react-app redux-toolkit --template typescript

📌 Redux toolkit을 다음과 같이 추가한다

yarn add @reduxjs/toolkit react-redux

Redux store 생성

📌 src/app/store.js 생성
- configureStore api를 import시켜준다.
- 우선 빈 redux store를 생성한다.

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

react 프로젝트에 redux store 제공하기

일단 store를 생성하고 나면, 기존 src/index.js내에 어플리케이션을 둘러싼 react-redux <Provider>를 넣은 react-components를 사용할 수 있게 됨.

📚 참고

https://redux-toolkit.js.org/tutorials/quick-start