[리덕스] 리덕스 툴킷

AnSuebin·2022년 12월 9일
0

1. 리덕스 툴킷 설치(리덕스 포함)

yarn add react-redux @reduxjs/toolkit 

2. 리덕스 툴킷을 사용하면 기존 리덕스와 크게 달라지는 것은 두 가지

  • module에서의 counterSlice hook 사용
  • configStore에서의 configureStore hook 사용

3. module에서 createSlice() 사용

  • createSlice는 기존 액션 크리에이터, 액션 value, 리듀서를 모두 합친 hook
  • createSlice의 인자는 아래와 같음
const createSlice = createSlice({모듈 이름, 초기값, 리듀서})
  • 위에 initialState를 먼저 설정한 후
const initialState = {number: 0,}
  • 슬라이스 인자 값들 정리
const counterSlice = createSlice({
  name: "counter",
  initialState,
  // 리듀서로 들어간 것은 reducer가 되는 것과 동시에 액션크리에이터가됨
  // 액션 밸류 또한 함수의 이름을 따서 자동 생성
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },

    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});
  • 후에 counterSlice의 액션 구조분해할당으로 export
export const {addNumber, minusNumber} = counterSlice.actions
  • counterSlicer의 reducer도 export
export default counterSlice.reducer;

4. configStore에서 configureStore 사용

  • configureStore, 리듀서 couter 받아오기
const store = configureStore({
  reducer: { counter: counter },
});
profile
고객에게 명료한 의미를 전달하고, 명료한 코드를 통해 생산성 향상에 기여하고자 노력합니다.

0개의 댓글