Redux 기본 원리

Redux가 굴러가는 원리를 알아보기 위해 몇가지 코드를 작성했다.

// import { legacy_createStore } from "redux";

const redux = require("redux");

//항상 2개의 파라미터를 받아야한다.
const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
    };
  }
  return state;
};

const store = redux.legacy_createStore(counterReducer);

const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState);
};

store.subscribe(counterSubscriber);

store.dispatch({ type: "increment" });
store.dispatch({ type: "decrement" });

 

Reducer를 통해서 2개의 파라미터를 받아 설정해놓는다, state의 초기 값을 설정할 수 있고

자바스크립트 처럼 함수를 작성할 수 있다.

 

store라는 객체를 만들어서 해당 Reducer를 저장했다. Redux의 옵션이 바뀌어서

createStore 에서 legacy_createStore로 바뀌었다.

요즘에는 이거 말고 툴킷? 이라는 다른 방법을 사용하는 거 같다.

내가 공부하는 유데미에는 아직 업데이트가 되지 않았다.

 

또 store.getState()를 통해서 해당 state와 action에 접근할 수 있고

dispatch를 통해서 해당 값을 사용할 수 있다.

아래의 코드는 toolkit을 통해서 작성한 값이다.

const { configureStore, createSlice } = require("@reduxjs/toolkit");

// Slice 생성 (Reducer와 Actions를 함께 정의)
const counterSlice = createSlice({
  name: "counter", // 슬라이스 이름
  initialState: { counter: 0 }, // 초기 상태
  reducers: {
    increment(state) {
      state.counter++; // 상태를 직접 수정 (immer가 처리)
    },
    decrement(state) {
      state.counter--; // 상태를 직접 수정
    },
  },
});

// Actions 추출
const { increment, decrement } = counterSlice.actions;

// 스토어 생성
const store = configureStore({
  reducer: counterSlice.reducer, // reducer 등록
});

// 구독자 함수
const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState);
};

// 스토어에 구독자 등록
store.subscribe(counterSubscriber);

// 액션 디스패치
store.dispatch(increment()); // increment 액션 호출
store.dispatch(decrement()); // decrement 액션 호출

---

변경된 주요 부분

1. createSlice로 Reducer와 Actions를 정의
   • createSlice를 사용하여 상태와 상태 변경 로직을 한 곳에 정의.
   • increment와 decrement는 자동으로 액션 생성자가 만들어지므로 따로 정의할 필요가 없음.
2. configureStore로 스토어 생성
   • redux.createStore 대신 configureStore를 사용하여 간단히 스토어 생성.
   • Redux DevTools와 미들웨어가 기본으로 설정됨.
3. 액션 호출 간소화
   • store.dispatch({ type: "increment" }) 대신 store.dispatch(increment())로 간단히 호출 가능.
4. 자동 불변성 관리
   • Redux Toolkit은 immer를 내장하고 있어 상태를 불변성을 신경 쓰지 않고 직접 수정할 수 있음.

---

결과

위 코드를 실행하면 다음과 같은 출력이 터미널에 표시됩니다:

{ counter: 1 }
{ counter: 0 }

increment와 decrement 액션이 각각 호출되어 상태가 변경된 결과입니다.

---

Redux Toolkit의 장점

1. 코드 간결화:
   • 기존 legacy_createStore와 비교해 보일러플레이트 코드가 줄어듦.
2. 안정성:
   • 상태를 직접 수정하는 방식이 가능하면서도 불변성 유지.
3. 확장성:
   • 복잡한 상태 관리 로직을 더 쉽게 추가 가능.

이 방식으로 작성하면 더 직관적이고 유지보수가 쉬운 코드를 작성이 가능해 보인다.