Reducer

Reducer 는 현재의 state와 Action을 이용해서 새로운 state를 만들어 내는 pure function 이다

장바구니 추가 액션에 대한 코드

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, {
        cartItems: [...state.cartItems, action.payload]
      })
    default:
      return state;
  }
}

Reducer의 Immutability(불변성)

Reducer 함수를 작성할 때 주의해야 할 점이 있다
바로 Redux의 state 업데이트는 immutable한 방식으로 변경해야 한다
Redux의 장점 중 하나인 변경된 state를 로그로 남기기 위해서 꼭 필요한 작업이다

immutable한 방식으로 state를 변경하기 위해서는 Object.assign을 통해 새로운 객체를 만들어 리턴한다

Object.assign()
Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다

Object.assign(target, source)
target에 source를 더하여 반환한다 return target

reducer formet

import <action type> from "<action 파일 위치>"
import <상태가 변할 대상> form "<더미 파일>"

const <변수> = (state = <상태가 변할 대상>, action) => {
  switch (action.type) {
    case <action type 이름> :
      return Object.assign({}, state, <바뀔 내용 code 작성>)
  }
}

ex

// action type import
import { REMOVE_FROM_CART, ADD_TO_CART, SET_QUANTITY } from "../actions/index";

// db import // state 즉 상태가 변할 아이
import { initialState } from "./initialState";

const reducer = (state = initialState, action => {
  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, {
      // cartItem에 객체 추가 code 작성
        cartiItem: [...state.cartItems, action.payload]
      })
  }
  return state;
}

Object.assign() 객체 병합

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 목표 객체 자체가 변경됨.

같은 속성을 가진 객체 병합

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

Reducer가 여러개일 경우

Reducer은 combineReducers 메소드를 통해 여러 가지의 Reducer들을 하나로 합칠 수 있다

ex

import { combineReducers } from 'redux';
import itemReducer from './itemReducer';
import notificationReducer from './notificationReducer';

const rootReducer = combineReducers({
  itemReducer,
  notificationReducer
});

export default rootReducer;