Redux [Basic] - Reducers

01.리덕스의 리듀서란?

• 액션을 받으면 그 액션이 적용되어 달라진(안달라질수도 있음) 결과를 만들어 줍니다.

• 리듀서는 Pure Function 함수 입니다.

• Pure Function: 같은 인풋을 받으면 항상 같은 결과를 만들어내는 함수 입니다.

• 리듀서는 Pure Function 함수 이므로 시간차에 따라 다른 결과물을 만들어내야하는 코드는 사용하면 안됩니다.

• 리듀서는 Immutable(불변) 해야 합니다.

• 원래의 state와 새로운 state가 서로 별도의 객체로 만들어 져야 합니다.

• Immutable해야 리듀서를 통해 state값이 달라졌음을 Redux가 인지할 수 있습니다.

리듀서의 형태

function 리듀서(previousState, action) { // `previousState`: 현재의 `state`값
	return newState; // `previousState`객체와 `action`객체를 이용해서 새로운 `State`객체를 만들어 반환 합니다.
}

• 액션을 받아서 state를 리턴하는 구조
• 인자로 들어오는 previousState와 리턴되는 newState는 서로 다른 참조를 가지도록 해야합니다. 즉, 서로 상태값이 달라야 함(Immutable)

02.리듀서 실습 예제

파일 생성

• redux폴더안에 reducers.js파일 생성

actions.js

// 1.액션의 타입을 정의하여 변수로 빼는 단계
const ADD_TODO = "ADD_TODO";

// 2.액션 객체를 만들어 내는 함수를 만드는 단계
function addTodo(todo) {
  return {
    type: ADD_TODO, // 액션의 타입 지정
    todo, // 액션이 할일 지정 (payload)
  }
}```

**reducers.js**
```js
import { ADD_TODO } from "./actions"

// state
// ["코딩", "점심 먹기"];

function todoApp(previousState, action) {
 
  // 초기값을 설정해주는 단계
  if(previousState === undefined) {
    return [];
  }

  if(action.type === ADD_TODO) {
      return [...previousState, action.todo];
  }

  return previousState;
}

• 현재의 state객체와 action객체를 받아 변경되지 않은 state객체를 반환