🍎 리덕스툴킷(RTK)이란?

코드는 더 적게, 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것.
리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘림
→ 리덕스 툴킷을 통해 어느정도 자동화.

🌳 설치

CRA를 통해 새로운 프로젝트를 생성.
패키지 설치.
yarn add react-redux @reduxjs/toolkit

Redux와 RTK의 차이점
Action Value와 Action Creator를 직접 생성해주지 않고,
Slice라는 API를 통해 Action Value, Action Creator, Reducer가 하나로 합쳐졌다는 점.

// createSlice API 뼈대

const counterSlice = createSlice({	// createSlice API를 통해 슬라이스 생성
	name: '',	// 모듈 이름
  	initialState : {}, // 모듈의 초기상태 값
  	reducers : {},	// 모듈의 Reducer 로직, 여러개 들어갈 수 있기 때문에 객체
})

counter 만드는 예제

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

const initialState = {
	number: 0,
}

const counterSlice = createSlice({
	name: "counter",
	initialState,
  	reducers: {
      	// 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자, 액션크리에이터가 된다.
      	// Action Value까지 함수의 이름을 따서 자동으로 생성.
    	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 객체를 의미
// reducer는 configStore에 등록하기 위해 export default
export default counterSlice.reducer;

actions 속성은 Redux Toolkit에서 생성한 슬라이스(slice) 객체에 포함된 액션 생성자 함수들을 담고 있는 객체.
Redux Toolkit의 createSlice 함수를 사용하여 슬라이스를 생성하면, 해당 슬라이스의 액션 생성자 함수들이 actions 속성에 자동으로 포함된다.

configStore

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

// slice.reducer
import counter from "../modules/counterSlice";
import todos from "../mmodules/todosSlice";

// 모듈이 여러개인 경우
// 추가할때마다 reducer 안에 각 모듈의 slice.reducer를 추가해줘야 한다.
const store = configureStore({
	reducer: { counter: counter, todos: todos },
})

export default store;

// 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>
);

툴킷을 사용해서 만든 모듈을 조회하는 방식은 일반리덕스를 사용했을 때와 동일하다.

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

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

export default App;