redux toolkit 라이브러리 설치 및 세팅

*아래의 프로젝트는 타입스크립트를 사용합니다. ts 를 사용하지 않는다면 js 파일로 만들어 주세용*

참고로 아래처럼 폴더를 만들어 파일을 넣어두는 것은 그저 편한 관리를 위한 것으로 공식 문서에서 권장하는 것이므로, 굳이 저렇게 안해도 제대로 로직만 잘쓰면 잘 돌아가긴 한당

근데 잘 모르면 일단 아래처럼 하자

그럼 일단 yarn으로 라이브러리 설치부터 하자

아래의 코드들을 터미널에 입력하여 라이브러리를 설치하자

yarn add @reduxjs/toolkit

yarn add redux react-redux

yarn add --dev @types/react-redux

그 후 프로젝트 폴더 내의 src 폴더에 store 폴더를 만든다

store 폴더 안에 hooks.ts 파일을 만들고 아래의 코드를 붙여 넣어주자

import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "./store";

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

위 코드의 목적은 다음과 같다

'hooks 파일에서 useAppDispatch 와 useAppSelector 를 작성하고 export 하는 것으로 컴포넌트마다 매번 useDispatch 와 useSelector 를 사용하지 않아도 되게 해준다'

즉, hooks 파일에서 useDispatch 와 useSelector 를 모아서 정의하므로,

컴포넌트에서는 useAppDispatch 와 useAppSelector 를 import 해서 useDispatch 와 useSelector 대신 가능하다!

 

그 후, src 폴더 내에 store.ts 파일을 만들어서 아래의 코드를 넣어주자

import { configureStore } from "@reduxjs/toolkit";
// import user from "./store/userSlice"; (외부에서 상태 가져오는 예시임)

/*
// 요건 내부에서 상태 정의하는 예시임
const stocknum = createSlice({
  name: "stock",
  initialState: [10, 11, 12],
});
*/

export const store = configureStore({
  reducer: {
  	users: user.reducer,
    stock: stocknum.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;

위 파일은 상태를 저장하기 위해 만든 파일이다.

여기 내에서 slice를 만들던 가져오던 해서 reducer 안에 사용할상태명: slice명.reducer 로 작성해 주면

해당 상태를 프로젝트 내에서 쉽게 불러와서 사용 가능하다!

 

그 후, store 폴더 내에 reducer.ts 파일을 만들어주자. 내용은 일단 비워두고, 추후 reducer 를 만들어야 할때 이 파일 안에서 만들어두고 export 하여 가져다 쓰도록 하자