순서
1. 리덕스 툴킷(Redux-Toolkit) 이란 🌱
2. 리덕스와 툴킷 코드 비교 🌱
3. configStore 비교 🌱
4. App.js에서 툴킷을 이용해도 모듈을 조회할 수 있다. 🌱
리덕스 사용을 위해 작성한 duck패턴 요소가 전체적인 코드량을 늘린다는 불만이 발생하였고 리덕스팀이 이를 수용하여 코드는 적게, 하지만 더 사용하기 편하게 만든 것이 리덕스 툴킷(Redux-Toolkit)이다.
리덕스 툴킷은 기존 리덕스와 구조, 패러다임 모두 동일하다.
전체적인 코드량을 줄이기 위해 새로운 API가 추가되었고 손으로 하나하나 작성해야했던 ducks패턴 요소를 약간이나마 자동화하였다. 또 컴포넌트에서 useSelector를 이용하는 것도 동일하다. 바뀐 것은 모듈파일뿐이다.
프로그램 모듈 작성시 리덕스는 action value, action creator, initial state, reducer를 모두 적어주어야 한다.
//action value
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";
//action creator
export const addNumber = (payload) => {
return {
type: ADD_NUMBER,
payload,
};
};
export const minusNumber = (payload) => {
return {
type: MINUS_NUMBER,
payload,
};
};
// Initial State
const initialState = {
number: 0,
};
// Reducer
const counter = (state = initialState, action) => {
switch (action.type) {
case ADD_NUMBER:
return {
number: state.number + action.payload,
};
// [퀴즈 답]
case MINUS_NUMBER:
return {
number: state.number - action.payload,
};
default:
return state;
}
};
// export default reducer
export default counter;
🙌
다음은 리덕스 툴킷을 이용해 사용한 코드다. 내용을 보면
action value, action creator, reducer 가 하나로 합쳐진 것을 확인 할 수 있다.
Slice 라는 API를 사용하면 action value, action creator, reducer 를 각각 만들 필요 없이 한번에 만들 수 있다.
// src/redux/modules/counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
number: 0,
};
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;
},
},
});
// 액션크리에이터는 컴포넌트에서 사용하기 위해 export 하고
export const { addNumber, minusNumber } = counterSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 합니다.
export default counterSlice.reducer;
🙌
여기서 슬라이스만 보면
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;
},
},
});
🙌
리듀서 내부 함수는 리듀서의 로직이자, action creator가 된다.
action value 도 함수이름을 따서 자동으로 생성된다.
즉, 우리는 reducer만 만들면 된다.
createSlice 안에 인자로 다음 세가지는 필수로 작성해야 한다.
name: "counter"
initialState
reducers: {}
import { createStore } from "redux";
import { combineReducers } from "redux";
import counter from "../modules/counter";
const rootReducer = combineReducers({
counter,
});
const store = createStore(rootReducer);
export default store;
import { configureStore } from "@reduxjs/toolkit";
⭐️ 아래 import 해온 것은 slice.reducer 입니다.
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;
여러 개의 모듈을 가져올 수 있다.
위처럼 configStore를 불러 reducer를 등록할 때 함께 등록하면 된다.
todos 모듈코드 🌱
// src/redux/modules/todosSlice.js
import { createSlice } from "@reduxjs/toolkit";
const initialState = {
todos: [],
};
export const todosSlice = createSlice({
name: "todos",
initialState,
reducers: {},
});
export const {} = todosSlice.actions;
export default todosSlice.reducer;
// 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;
리덕스를 사용하면 리덕스 데브툴 을 사용할 수 이싿.
현재 저장된 state의 상태, 액션이 발생하면 그 액션이 무엇인지, state는 어떻게 변경되었는지를 리덕스 데브툴로 확인할 수 있다.
리액트 프로젝트에서 리덕스를 사용하고 있고 localHost로 프로젝트를 켰을 때 리덕스 데브툴 플러그인이 초록색으로 바뀐다.