redux toolkit의 기록

나중에 또 까먹을까봐 미리 작성해두는 redux toolkit 사용 방법

 

-기본 세팅

 

npm install @reduxjs/toolkit react-redux

 

미리 프로젝트에 설치해준 뒤

 

src 폴더 내에 store폴더를 생성해준다.

 

store폴더 내에 features 폴더를 생성해준다.

 

features 폴더 내에 redux로 관리해줄 아이템들을 또 따로 폴더로 관리해준다.

 

가장 간단한 예시로 Counter 폴더를 생성해주고

countSlice.ts 파일을 생성해준 뒤 관리할 state와 그걸 관리할 함수를 만든다고 생각해주면 편하다.

 

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

type CountSliceType ={
    counter:number
}

const initialState:CountSliceType = {
    counter:0
}

export const CountSlice = createSlice({
    name : 'CountSlice',
    initialState,
    reducers:{
        CountUp:(state)=>{
            state.counter += 1
        },
    }
})

export default CountSlice.reducer;
export const {
    CountUp } = CountSlice.actions

 

타입을 잡아두고 initialState는 말그대로 State이다. counter라는 state를 갖고있고 reducers에서 counter를 관리할 함수를 만들어 둔 것.

 

만들어 둔 slice를 store에서 설정해준다.

 

// app/store.ts
import { configureStore } from '@reduxjs/toolkit';
import writingSlice from './features/writing/writingSlice';
import CountSlice from './count/countSlice';

export const store = configureStore({
  reducer: {
    writing: writingSlice,
    Counter: CountSlice
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

 

 

이제 원하는 컴포넌트에서 사용하면 된다.

useSelector를 사용해 원하는 state를 꺼내오고

useDispatch를 사용해 원하는 함수를 꺼내와 사용한다고 생각하면된다.

 

import { useDispatch, useSelector } from "react-redux"
import { RootState } from "../../store/store"
import { CountUp } from "../../store/count/countSlice"

export default function Header(){
    const count = useSelector((state:RootState)=> state.Counter.counter)
    const dispatch =  useDispatch()
    return(
        <div>
        <p>{count}</p>
        <button onClick={()=>dispatch(CountUp())}>상승</button>
        </div>
    )
}

 

위 처럼 count에 useSelector를 사용해 원하는 state를 담아둔 것이고

dispatch를 사용해 CountUp() 함수를 가져와 버튼에 부여해준 것.

 

- redux toolkit을 사용하면 props로 상위 컴포넌트에서 내려보내는 번거로움을 없앨 수 있고.

어디에서나 그냥 원하는걸 빼와서 사용할 수 있다는 장점이있다.

 

또한 어느 부분에서 에러가 났을때 (기능적인부분 함수를 수정해야할 때)

그 컴포넌트를 찾아다니지않고 store에서 그 기능을 수정해주면된다는 장점이있다.

그렇기에 이름을 잘 정해야할 것 같다..