[ReactJS_Complete] Redux toolKit: createSlice

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

Redux toolKit 사용하기

1. Redux toolKit 설치

npm install @reduxjs/toolkit
 

 

2. createSlice import 및 선언

import {createSlice} from '@reduxjs/toolkit';
 
const initialState = {counter: 0, showCounter: true};
 
const counterSlice = createSlice({
    name: 'counter', // slice 이름
    initialState, // initialState: initialState와 동일
    reducers: {
        increment(state) {
            state.counter++;
        }, // 현재 상태를 변경한 것이 아니라 redux toolkit이 자동으로 원래 상태를 복제 후 새로운 상태 객체를 생성하여 반환
        decrement(state) {
            state.counter--;
        },
        increase(state, action) {
            state.counter = state.counter + action.payload;
        }, // action-payload: 추가 데이터
        toggleCounter(state) {
            state.showCounter = !state.showCounter;
        },
    }
});
 

⭐ redux 사용 시, 기존 state를 직접 변경하지 않도록 유의

⭐ state.counter++: 기존 state를 직접 업데이트한 것이 아니라 redux toolkit에 의해 만들어진 새로운 상태 객체를 업데이트 한 것

 

3. createSlice를 store에 등록

const store = configureStore({
    reducer: configureStore.reducer
});
 

cf. configureStore를 통한 reducer 병합

const store = configureStore({reducer: {
    counter: counterSlice.reducer
}}); configureStore-reducer: 모든 reducer를 하나의 큰 reducer로 병합
 

 

4. reducer 메서드에 접근하기 위한 slice의 actions 선언

: createSlice 함수의 reducer 영역에 있는 reducer method와 이름이 같은 메서드 호출 시 해당 메서드의 action 객체 생성

export const counterActions = counterSlice.actions;
// counterSlice.actions: return {type: 'some auto-generated unique identifier'}
 

 

5. action이 필요한 Component에서 import 후 실행

import { counterActions } from "../store/index";
 
const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const show = useSelector((state) => state.showCounter);
  const dispatch = useDispatch();
 
  const incrementHandler = () => {
    dispatch(counterActions.increment());
  };
  const increaseHandler = () => {
    dispatch(counterActions.increase(5)); 
  }; // redux/toolkit: {type: SOME_UNIQUE_IDENTIFIER, payload: 5}
  const decrementHandler = () => {
    dispatch(counterActions.decrement());
  };
 
  const toggleCounterHandler = () => {
    dispatch(counterActions.toggleCounter());
 
    return (
      <main className={classes.counter}>
        <h1>Redux Counter</h1>
        {show && (
          <div className={classes.value}>-- COUNTER VALUE: {counter} --</div>
        )}
        <div>
          <button onClick={incrementHandler}>Increment</button>
          <button onClick={increaseHandler}>Increment by 5</button>
          <button onClick={decrementHandler}>Decrement</button>
        </div>
        <button onClick={toggleCounterHandler}>Toggle Counter</button>
      </main>
    );
  };
};
 
export default Counter;
 
 

⭐ redux/toolkit 내부에서 action 객체를 자동으로 생성

→ payload(추가 데이터)값의 key 이름을 payload로 자동으로 설정하였으므로 createSlice-reducer 선언 시 유의