ETC - 2022. 9. 3.

React-Redux 사용법 3/3

지난시간에 이어서 이번시간에는
저번 예시 코드를 보시면 boilterplate(보일러 프레이트)가 굉장히 구조 짤게 많아요ㅠㅠ
이번시간에는 그런 boilterplate(보일러 프레이트)도 줄이고 Redux를 좀 더 편하게 잘 써먹기 위한
도구 한번 배워보겠습니다.

👉🏻Redux Toolkit

바로 Redux Toolkit이라는 패키지 입니다.

Redux 를 사용하는데 되게 유용한 패키지들이 많았어요. 예를 들면
- redux-actions을 불변성 보존을 위한 immer
- store 값을 효율적으로 핸들링하여 불필요한 리렌더링을 막기 위해 reselect(메모이제이션 기능 지원)
- 비동기 작업을 위한 thunk 와 saga

등등 리덕스의 유효한 기능을 사용하기 위해서는 4~5개의 라이브러리를 사용해야만 했습니다.
하지만 Redux Toolkit은 내장된 기능으로 saga를 제외한 위의 모든 기능을 제공한다.

✋🏻잠깐: redux-saga는 Redux로 Sideeffect를 다루기 위한 Middleware입니다.

redux-saga로 비동기처리와 분투하다. (링크참고)

이런 친구들을 하나로 묶어서 제공해주는게 바로 Redux Toolkit입니다.

👉🏻설정하기

액션타입, 액션생성 함수, 리듀서 그리고 이니셜 스테이트 기초값 들을 한번에 묶어서 사용할 수 있습니다.
이거를 slice라고 부릅니다. slice도 한번 만들어볼 겁니다.
index.js에서 설정은 이전POST내용과 동일합니다.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {Provider} from 'react-redux'
import store from './modules/configStore';

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

// src/modules/configStore.js
import { configureStore } from "@reduxjs/toolkit";
import catReducer from "./catSlice"

const store = configureStore({
	reducer: {
		cat: catReducer //Slice를 만든 Reducer을 추가해줍니다.
	}
});

export default store;

여기까지 저장소 만들고 주입까지 한것입니다.
이제 Slice 만들어 봅시다.

불변성을 지켜줄 필요없어서 이렇게 바로 할당을 할수 있습니다.
불변성은 Redux Toolkit 내부에 immer라는 패키지를 가지고 있어서 자동으로 내부적으로 처리해줍니다.

// src/modules/catSlice.js
import { createSlice } from "@reduxjs/toolkit";

// 액션 타입, 액션 생성함수, 초기값을 3가지를 한번에 묶어서 사용할수 있습니다.
const catSlice = createSlice({
	name: 'cat', //slice를 한마디로 정의하는 키워드
	initialState: { // 초기 값
		name: "TriplexLab", 
		age: 100
	},
	reducers : { // action 생성 함수
		changeName: (state, action) => {
			state.name = action.payload; //👈🏻 불변성 유지를 우리가 직접 할 필요가 없습. 
		}
	}
});

export const { changeName } = catSlice.actions
export default catSlice.reducer;

👉🏻사용방법

App 컴포넌트에서 그대로 사용해 봅시다.
사용하는 방법은 기존에 사용방법도 동일합니다.
다만 catSlice.js에서 설정을 했으니깐 import경로만 변경했습니다.

//src/App.js
import { useSelector, useDispatch } from "react-redux";
// import { changeName } from "./modules/cat";
import { changeName } from "./modules/catSlice";

function App() {
  const cat = useSelector(state => state.cat);
  const dispatch = useDispatch();
  const handel = () => {
    dispatch(changeName("Younhoso!!"))
  }

  return (
    <div className="App">
      <p>name: {cat.name}</p>
      <button onClick={handel}>이름 바꾸기</button>
    </div>
  );
}

export default App;