reducer와 reducers

 

🟡 reducer와 reducers

Redux Toolkit을 사용할 때 reducer(단수)와 reducers(복수)는 이름은 비슷하지만 의미가 다르다.

 

◼️ reducer (단수)

reducer는 현재 State와 Action을 받아 새로운 State를 반환하는 하나의 함수이다.

Redux에서 상태 변경을 담당하는 핵심 함수이며, createSlice()로 생성된 최종 Reducer도 reducer이다.

(state, action) => newState

• Slice를 생성하면 최종적으로 하나의 reducer가 만들어진다.

export default counterSlice.reducer;

 

◼️ reducers (복수)

reducers는 createSlice() 내부에서 여러 개의 reducer 함수를 정의하는 객체이다.

각 함수는 하나의 Action과 연결되며, Redux Toolkit이 Action과 Reducer를 자동으로 생성해 준다.

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    increment(state) {
      state.value++;
    },

    decrement(state) {
      state.value--;
    },
  },
});

• increment(): 하나의 reducer 함수.
• decrement(): 하나의 reducer 함수.
• reducers: reducer 함수들을 모아두는 객체.

 

◼️ 관계

reducers에 정의된 여러 개의 reducer 함수를 Redux Toolkit이 하나로 합쳐 최종 reducer를 생성한다.

const counterSlice = createSlice({
  reducers: {
    increment() {},
    decrement() {},
    reset() {},
  },
});

export default counterSlice.reducer;

• reducers: 여러 개의 reducer를 정의하는 곳.
• reducer: reducers를 기반으로 생성된 최종 Reducer.

 

 

📍 POINT 📍

✔️ reducer는 하나의 상태 변경 함수이다. ✔️

✔️ reducers는 여러 개의 reducer 함수를 정의하는 객체이다. ✔️

✔️ createSlice()는 reducers를 기반으로 하나의 reducer를 자동 생성한다. ✔️

 

 

📋 reducer vs reducers  📋

구분	reducer	reducers
의미	State를 변경하는 하나의 함수	여러 reducer 함수를 정의하는 객체
사용 위치	counterSlice.reducer	createSlice() 내부
개수	1개	여러 개
역할	State 변경	State 변경 함수들을 정의

 

---

 

⚙️ Redux Toolkit의 createSlice 사용 ⚙️

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter', // 이 slice의 이름
  initialState: { value: 0 }, // 초기 상태
  reducers: { // <-- 여기에 'reducers' (복수)를 씁니다!
    increment: (state) => { // 'increment'라는 이름을 가진 하나의 'reducer' (단수) 함수
      state.value += 1;
    },
    decrement: (state) => { // 'decrement'라는 이름을 가진 또 다른 하나의 'reducer' (단수) 함수
      state.value -= 1;
    },
    // ... 더 많은 작은 reducer 함수들
  },
  // extraReducers: (builder) => { /* 외부 액션 처리 */ }
});

// 이렇게 정의된 'reducers' 객체 안에 있는 'increment'와 'decrement'가
// 각각 하나의 reducer 함수로 사용될 수 있습니다.
export const { increment, decrement } = counterSlice.actions;

// 최종적으로 외부로 export될 때,
// counterSlice.reducer는 'reducers' 안에 정의된 모든 작은 reducer 함수들을
// 하나로 합쳐진 거대한 'reducer' (단수) 함수가 됩니다.
export default counterSlice.reducer;