Redux - Reducers(리듀서)

Reducer 란?

• 액션을 주면 그 액션이 적용되어 달라진 결과를 만들어 줌 (안달라질 수도 있음)
• 함수이다.
  • Pure Function
  • : 같은 인자를 주었을 때 항상 같은 값이 나와야 함
  • Immutable⇒ 리듀서를 통해 상태가 달라졌음을 리덕스가 인지하는 방식이기 때문
  • : 기존의 상태와 업데이트된 상태가 각각 다른 객체여야함
• 형태

• function 리듀서(previousState, action) {
  	return newState;
  }​

  • 액션을 받아 스테이트를 리턴하는 구조
  • 인자로 들어오는 previosState 와 리턴의 newState 는 다른 참조를 가지도록 해야한다.

예제 코드

// action.js

export const ADD_TODO = "ADD_TODO";

function addTodo(todo) {
  return {
    type: ADD_TODO,
    todo,
  };
}

// reducers.js

import { ADD_TODO } from "./actions";
// state example = ['coding', 'eat lunch'];

const initialState = [];

function todoApp(previousState = initialState, action) {
  // 초기값 설정해 주는 부분 => initialState로 초기화하면 안써줘도 됨
  // if (previousState === undefined) {
  //   return [];
  // }
  if (action.type === ADD_TODO) {
    return [...previousState, action.todo];
  }

  return previousState;
}