Redux-ToolKit 이란?

Redux란 React에서 가장 많이 사용하는 상태관리 라이브러리 중 하나로 전역에서 상태관리를 하거나, Props drilling을 방지하기 위해 사용한다.

* Props drilling이란?

리액트에서 컴포넌트의 deps가 깊어질수록 props로 상태관리가 어려워지는 현상을 의미한다.

1. Redux와 Redux-ToolKit의 차이점

Redux
Redux는 단일 상태관리 라이브러리로써 단일 스토어를 사용하여 전역 상태를 관리하며, 상태 변경을 위한 불변성 원칙을 적용하여 예측 가능하고 일관성 있는 상태 업데이트를 수행한다.

Redux-ToolKit
Redux Toolkit은 Redux를 사용하여 더 쉽게 상태 관리를 할 수 있도록 도와주는 공식적인 도구 세트이다. Redux Toolkit은 Redux의 기본 기능을 확장하며, 개발자가 반복적이고 일상적인 작업을 줄일 수 있는 많은 유용한 기능을 제공한다.

결국 Redux Toolkit은 Redux를 보다 쉽고 빠르게 사용할 수 있도록 도와주는 유용한 도구로 생각할 수 있다.

2. 설치

npm install @reduxjs/toolkit react-redux

3. 용어

store : 컴포넌트의 상태를 저장하고 관리하는 저장소(하나밖에 사용 불가능)

state : 컴포넌트의 상태

reducer : 현재 상태와 액션 객체를 받아 새로운 상태를 리턴하는 함수

action : 스토어의 상태를 변경하기 위해서는 액션객체를 사용해야하며 ,
액션 객체는 액션생성함수에 의해서 만들어짐.

Dispatch : 스토어의 내장 함수 중 하나이며, 액션 객체를 넘겨줘 상태를 업데이트 시켜주는 역할

4. 주요 함수

configStore : Redux 스토어를 구성하는데 사용하며, Redux Middleware 및 DevTools 확장과 같은 기본 구성을 제공한다.

createSlice : Redux Reducer를 작성하는 데 사용되는 새로운 방법으로써, 이를 통해 간단한 객체에서 상태 슬라이스를 정의하고, 해당 슬라이스에 대한 Reducer, 액션 및 선택적으로 새로운 셀렉터를 자동으로 생성할 수 있다.

5. 사용법

1. store.tsx

import { configureStore } from "@reduxjs/toolkit";
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import AllSlice from "./AllSlice";
import Toggle from "./Toggle";

const Store = configureStore({
  reducer: {
    All: AllSlice,
    Toggle: Toggle,
  },
});

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

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

export default Store;

상태를 저장하고 관리할 store.tsx를 만들어준다.

2. Toggle.tsx

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

interface initialStateType {
  isClicked: boolean;
}

const initialState: initialStateType = {
  isClicked: false,
};

const Toggle = createSlice({
  name: "toggle",
  initialState,
  reducers: {
    toggle: (state) => {
      state.isClicked = !state.isClicked;
    },
  },
});

export default Toggle.reducer;
export const toggleActions = Toggle.actions;

Toggle.tsx는 상태를 ture false로 toggle하는 리듀서이다.

이 리듀서를 store에 등록한다.

3. index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import Router from "./Router";
import GlobalStyle from "./styles/GlobalStyles";
import { Provider } from "react-redux";
import store from "./store/store";
import "./fontAwesome";


const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <Provider store={store}>
    <GlobalStyle />
      <App />
  </Provider>
);

index.tsx에 store를 등록한다.

4. App.tsx

import React from "react";
import { useAppSelector } from "../../store/store";
import { useAppDispatch } from "../../store/store";
import { toggleActions } from "../../store/Toggle";

const App = () => {

 const dispatch = useAppDispatch(); //상태를 변경할 함수
 
 const toggle = useAppSelector((state) => state.Toggle.isClicked);// 상태를 가저옴
 
 const isToggle = () => {
   dispatch(toggleActions.toggle());
  }; // 상태를 토글할 함수
  
return <button onClcik={isToggle}>{toggle}</button>
}