[리액트 React] 리덕스툴킷 (ReduxToolkit)

설치 명령어
npm install @reduxjs/toolkit

 

ReduxToolkit

• Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식 제공하는 개발도구이다.
• Redux Toolkit은 Redux의 문제점을 보완하기 위해 만들어졌다
• 큰 차이점은 Action Value와 Action Creator를 이제 직접 생성해주지 않고, Action Value, Action Creator, Reducer가 하나로 합쳐졌다

 

Redux 사용 시 문제점

• 구성의 복잡성
• 많은 패키지 필요성(의존성)
• 한 작업 시 많은 코드 양

 

Store

const store = configureStore({
  // 리듀서를 넣음
  reducer: {
    counter,
  },
});

export default store;

 

modules

• Slice API를 이용하여 스위치문에 작성한 리듀서(함수)를 counterSlice reducers에 작성하면 Action Value와 Action Creator가 모두 하나로 합쳐지게 된다
• 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자, 액션크리에이터가 되고 Action Value까지 함수의 이름을 따서 자동으로 만들어진다
• reducer는 configStore에 등록하기 위해 export default
• 액션크리에이터는 컴포넌트에서 사용하기 위해 export, 리듀서에 로직을 추가할 때마다 함수를 추가해서 내보내주면 된다

// Initial State
const initialState = {
  number: 0,
};

// createSlice : 액션크리에이터와 리듀서를 한번에 생성할 수 있다
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;
    },
  },
});

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

export default counterSlice.reducer;
export const { addNumber, minusNumber } = counterSlice.actions;