[Redux] Redux toolkit 기초 코드 정리

 

Redux(리덕스)란?

리덕스는 오픈 소스 자바크스립트 라이브러리의 일종으로 ,state를 이용해 웹 사이트 혹은 애플리케이션의 상태관리를 해줄 목적으로 사용합니다. 베이스는 Node.js 모듈로 store 라는 하나의 데이터 공간(저장소)를 가지고 전역적으로 데이터를 전달하기 위해 쓴답니다. 

 

Redux Toolkit (리덕스 툴킷)이란?

기존의 리덕스의 구조와 패러다임은 거의 동일하지만 코드량은 더 적게, 사용하기 편하게 개선된 것이라고 보면 좋을 것 같습니다.  

 

 

리덕스 툴킷의 장점

리덕스와 비교해보자면 우선 초기 설정시에 리덕스는 스토어를 구성하기 위해서 설치해야했던 각종 패키지들을 설치하지 않아도 됩니다. 툴킷에는 이미 설치되어있기 때문입니다! 그리고 불변성에 대해서 신경쓰지 않으셔도 됩니다!

이런 점이 코드량을 줄어들게 만들었지요. 

 

 

 

Redux Toolkit 코드 정리

app.js

리덕스와 마찬가지로 Provider를 사용해서 해당 파일을 감싸주고 store를 더 해줍니다

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

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

 

 

 

 

store/counterSlice.tsx

createSlice를 만들어줍니다. 이 부분이 기존의 Redux와 굉장히 다른 부분이에요

createSlice를 인자로 객체를 받는데 그 객체가 기존 리덕스에서 쓰던 name, initial state, reducers 입니다.

dispatc에서 메소드에 접근하기 쉽게 구조를 분해해서 할당해줍니다.

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

type InitialState = {
  value: number;
};

const initialState: InitialState = {
  value: 0,
};
const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    up: (state, action) => {
     //console.log(action)  => { payload : 2 }
      state.value = state.value + action.payload;
    },
  },
});

export default counterSlice;
export const { up } = counterSlice.actions;

 

 

 

 

store/index.tsx

store를 만들어줍니다. 이 store를 통해서 각 각 흩어져있는 reducer를 한 곳으로 모아줍니다.

import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "./counterSlice";

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

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

 

 

 

 

counter.tsx

useSelector를 사용해서 store의 state를 가져옵니다.

import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../store";
import { up } from "../store/counterSlice";

function Counter() {
  const dispach = useDispatch();
  const count = useSelector((state: RootState) => {
    return state.counter.value;
  });

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => { dispach(up(2));}}>+</button>
    </div>
  );
}

export default Counter;

 

 

 

 

 

 

 

공부 자료! 생활코딩님은 진짜 레전드 -! 

• Redux toolkit 공식문서
• 생활코딩님의 리덕스툴킷 강의보러가기