Redux-Toolkit를 찍먹해보기

1. Redux-Toolkit을 사용하다.

가. 왜 Redux-Toolkit을 사용할까?

정말 간단하다.

props로 내려주기 귀찮아서...

전역으로 상태를 관리하고 싶으니까 사용한다.

내가 경험해본 바로는 그냥

props + useState

느낌???

2. 초기설정방법

가. 우선 Redux-Toolkit을 설치한다.

대충 구글에 Redux-Toolkit을 검색하면 맨 위에 나온다.

npm install @reduxjs/toolkit

나. store를 만들어 준다.

src에 폴더를 하나 만들어서(혹은 아무곳이나)

import { configureStore } from "@reduxjs/toolkit";
import { 슬라이스 } from "../slices/form";

const store = configureStore({
  reducer: {
    리듀서이름: 슬라이스.reducer,
    ...
  },
});

export type RootState = ReturnType<typeof store.getState>;
// 얘는 타입스크립트 용

export default store;

작성해 준다.

다. 슬라이스 폴더를 하나 만들어 준다.

import { createSlice } from "@reduxjs/toolkit";

interface FormType {
  타입
}
// 초기 데이터
const initialState: FormType = {
  title: "블라블라",
  detail: "블라블라",
};

export const 슬라이스이름 = createSlice({
  name: "슬라이스이름",
  initialState,
  reducers: {
    슬라이스 내 리듀서이름: (state, action) => {
      const { title, detail } = action.payload;
      state.title = title;
      state.detail = detail;
    },
  },
});

export const { 슬라이스 내 리듀서이름 } = 슬라이스이름.actions;

1) initialState

초기에 어떤 모양으로 데이터(State)를 만들지 뼈대를 갖추는 작업이다.

2) 슬라이스 이름

createSlice함수로 만들어 준다.
이때 name으로 슬라이스 이름을 설정해주고
initialState로 초기값을 불러오고
reducers 내부에 데이터를 어떻게 바꿀지 명령하는 함수를 만들면 된다.

3) reducers

슬라이스 내 리듀서이름: (state, action) => {
      const { title, detail } = action.payload;
      state.title = title;
      state.detail = detail;
    },

리듀서 이름을 멋지게 작명한다.
state는 상태값을 의미하며 현재 상태로는 초기값이다.
action은 상태값을 변경하게 행동하는 것

const {title, detail} = action.payload

이는 구조 분해 할당으로 원래는
title.payload, detail.payload라고 사용하여야 하며 이는 리듀서를 사용했을 때 넘어오는 값이다.(화물이라고 보면 됨)

state.title = title
state.detail = detail

state(상태값)의 title을 찾아서 title.payload로 변경해 주세요 라는 의미이다.
화물이 도착했습니당

export const { 슬라이스 내 리듀서이름 } = 슬라이스이름.actions;

외부로 리듀서를 내보내준다.
이는 구조분해 할당으로 하나만 있으면 상관없지만 reducer들이 여러개이면
export const 리듀서1 = 뭐시기.actions,
export const 리듀서2 = 뭐시기.actions ...
귀찮으니 저렇게 해주자

라. index.tsx 혹은 jsx의 App을 Provider로 감싸준다.

import { Provider } from "react-redux";
import store from "./store/store";

<Provider store={store}>
      <App />
</Provider>

이때 Provider의 속성값으로 store가 있으니 이걸 import 해온다.

여기까지가 초기설정

3. 사용방법

~~쉽다 ~~

그냥 구조에 맞춰서 집어 넣어주면 된다.

가. useSelector hooks

hooks.tsx

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

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

타입스크립트를 사용하려면 hooks를 이용해야 한다고 한다.
(나도 잘 모름)

hooks라는 폴더를 멋지게 만들어주고

위와 같이 작성하면 된다.

나. 불러오기

const 변수명 = useAppSelector((state) => state)

console.log(변수명.리듀서이름)
// {
//	title : "블라블라"
//  detail : "블라블라"
// }

reducer에서 상태값을 불러오는 방법

const dispatch = useDispatch()

state에 어떠한 액션을 취하고 싶으면 useDispatch()라는 hook을 이용한다.

이때 걍 쓰는 거 보다 dispatch라는 변수에 담아서 사용하면 쉽다.

dispatch(리듀서명({title : 뭐시기, detail : 뭐시기}))

로 실행하면 결과값으로는

const 변수명 = useAppSelector((state) => state)

console.log(변수명.리듀서이름)
// {
//	title : "뭐시기",
//	detail : "뭐시기",
// }

로 변한다.

리덕스...

파라미터들만 잘 맞춰주면 상태관리가 쉬울지도??