Redux Toolkit

📖 리덕스 툴킷 (ToolKit)

• 리덕스랑 구조 , 패러다임 똑같음
  모듈 파일만 바뀐 것
  기존 리덕스보다 더 편한 거라고 생각하면 됨 (코드 더 적어짐)

모듈 설치 :
yarn add react-redux @reduxjs/toolkit

차이점: Action Value와 Action Creator를 이제 직접 생성해주지 않고,
Action Value, Action Creator, Reducer가 하나로 합쳐졌다는 점

CreateSlice API

CreateSlice 구조

const counterSlice = createSlice({
	name: '', // 이 모듈의 이름
	initialState : {}, // 이 모듈의 초기상태 값
	reducers : {}, // 이 모듈의 Reducer 로직
})

counterSlice 리듀서 객체 안에서 만들어주는 함수가 리듀서의 로직이 되면서도 동시에 Action Creator가 된다. 그리고 Action Value 까지 함수의 이름을 따서 자동으로 만들어짐!

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

export 후 configStore에 작성하는 방법은 동일

import { configureStore } from "@reduxjs/toolkit";
/**
 *  1. Slice Reducer import 
 */
import counter from "../modules/counterSlice";

// 모듈로 구현 후, Store에 모듈 연결 
const store = configureStore({
  reducer: { counter: counter, todos: todos },
});
	
export default store;

슬라이스를 사용하면, Action Value, Action Creator, Reducer 하나로 합치기 가능 !

파일 구조 참고!