2023.03.11) 항해 34일차 (1-리덕스 툴킷)

 

리덕스에 데여서 괜히 겁먹고 리덕스 툴킷도 어려울까봐 걱정을 엄청하며 두려운 마음으로 시작했다.

근데 다행히도 걱정과는 다르게 빠르게 이해할 수 있었다!!

괜히 쫄았네....

이번 주차에서 비동기 부분이 힘들다고 하니 쉽지만은 않겠지만 시작은 좋당!

 

1) 리덕스 툴킷

리덕스 툴킷은 리덕스를 개량한 것이다!

 코드는 더 적게 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷 이고, 줄여서 RTK 라고도 한다.

새로운 것이 아닌, 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고,

일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었다.

컴포넌트에서 useSelector를 통해서 사용하는 것은 모두 똑같다.

바뀐 부분은 그저 모듈 파일일 뿐!! 리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같다.

 

 

① 툴킷 설치하기

yarn add react-redux @reduxjs/toolkit

 

② 모듈과 스토어 연결

일반 리덕스와 큰 차이는 없지만, 조금의 차이는 있다.

// src/redux/modules/config/configStore.js

import { configureStore } from "@reduxjs/toolkit"; //기존 리덕스와 다르다!!
import counter from "../modules/counterSlice";
import todos from "../modules/todosSlice";

//모듈(Slice)이 여러개인 경우, 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가해줘야 한다.

//아래 예시는 하나의 프로젝트 안에서 counter 기능과 todos 기능이 모두 있고,
//이것을 각각 모듈로 구현한 다음에 아래 코드로 2개의 모듈을 스토어에 연결해준 것 이다.

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

export default store;

➂ index.js

생성한 store를 export default 해서 최상위의 index.js Provider에 주입해주는 것은 전혀 바뀐게 없다.

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/config/configStore";

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

➃ 모듈

리덕스 툴킷에서는 큰 차이점은 Action Value와 Action Creator를 이제 직접 생성해주지 않고,

Action Value, Action Creator, Reducer가 하나로 합쳐졌다는 점 이다.

이제 우리는 Slice 라는 API를 사용한다.

이 슬라이스를 사용하면 Action Value, Action Creator, Reducer를 각각 만들어줄 필요 없이,

한번에 3개가 모두 만들어진다.

// src/redux/modules/counterSlice.js
// 파일명이 다르다는 것을 눈치채보자!

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

const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter", // 이 모듈의 이름
  initialState, // 이 모듈의 초기상태 값
  reducers: { // 이 모듈의 Reducer 로직
  // 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자, 액션크리에이터가 된다.
  // 그래서 Reducer만 만들어 주면 된다.
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;

➄  모듈 조회

App.jsx에서는 툴킷을 사용해서 만든 모듈을 조회할 수 있다.

방식은 일반리덕스를 사용했을 때와 동일하다.

// src/App.js

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  // Store에 있는 todos 모듈 state 조회하기
  const todos = useSelector((state) => state.todos);

  // Store에 있는 counter 모듈 state 조회하기
  const counter = useSelector((state) => state.counter);

  return <div>App</div>;
};

export default App;