React - Redux Toolkit

1. 리덕스 툴킷이란?

• 리덕스 툴킷은 리덕스를 개량한 것으로, 리덕스를 더 편하게 사용하기 위한 기능들을 모아논 것이다.
• useSelector를 통해 사용하는 것은 똑같다!

툴킷 설치하기

yarn add react-redux @reduxjs/toolkit

리덕스와 차이점

Action Value와 Action Creator를 직접 생성하지 않고, Action Value, Action Creator, Reducer가 하나로 합친 것이다.

Counter 예제를 통해 사용법을 자세히 익혀보자

configStore.js

// import { createStore } from "redux";
// import { combineReducers } from "redux";
import counter from "../modules/counter";
import { configureStore } from "@reduxjs/toolkit";

// ASIS : tool-kit 이전
// const rootReducer = combineReducers({ counter });
// const store = createStore(rootReducer);

// TOBE : tool-kit 사용
const store = configureStore({
  // Reducer가 들어간다. (counter.js에서 가져오기)
  reducer: {
    // Reducer가 여러개일 수 있으므로 객체 형태로 넣어준다.
    counter,
  },
});
export default store;

Counter.js 모듈

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

const initailState = {
	number:0
};

// action creator와 reducer가 전부 들어있는 counterSlice 동시에 만든다!
const counterSlice = createSlice({
	name: "counter",
    initialState,
    reducers: {
    	addNumber: (state, action) => {
        	state.number = state.number + action.payload;
        },
        minusNumber: (state, action) => {
        	state.number = state.number - action.payload;
        }
    }
});

// configStore에 reducer를 등록하기 위해 export
export default counterSlice.reducer;
// action 객체 안에 reducer 들을 내보낸다.
export const { addNumber, minusNumber } = counterSlice.actions;

2. Redux Devtools

devtools 소개

현재 프로젝트의 state 상태, 액션이 일어났을 때 그 액션이 무엇이고, 그것으로 인해 state가 어떻게 변경되었는지 등의 정보를 확인할 수 있는 강력한 개발툴
구글 웹스토어에서 플러그인을 설치하면 된다.

오른쪽 위에 초록색 버튼이 생겼다면 성공적으로 설치가 완료된 것이다.

이렇게 편하게 state의 변화를 추적할 수 있다!
🤩