오늘 배운 것

Redux Basic 1/2

아래 문서는 Redux 공식문서를 바탕으로 공부한 내용을 정리한 것이다.

1. Before You Learn

Core Concepts

• Action : State에 어떤 변화가 일어났는지 알려주는 자바스크립트 객체

//Action 예시
{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

• Reducer : Prev State와 Action을 인자로 받아 앱의 Next State를 반환하는 자바스크립트 함수

Three Principles

1. 모든 State는 하나의 Store 안에 하나의 객체 트리 구조로 저장된다.

2. State를 변화시키는 유일한 방법은 무슨 일이 벌어지는지를 묘사하는 Action을 전달하는 방법 뿐이다.

3. Action에 의해 State 트리가 어떻게 변화하는 지를 지정하기 위해 순수 Reducer를 작성해야한다.

2. Action

Action은 애플리케이션에서 스토어로 보내는 데이터 묶음.

store.dispatch()메소드로 보낼 수 있다.

const ADD_TODO = 'ADD_TODO'
//type 속성의 value 값으로 문자열 상수를 주고 있다.

{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

• Action은 평범한 자바스크립트 객체.
• 어떤 형태의 Action이 실행될지 나타내는 type속성을 필수적으로 가져야 한다. 일반적으로 문자열 상수로 정의된다.
• type외의 Action 객체 구조는 사용자 정의에 따른다.

Action Creators(액션 생성자)

액션 생산자는(Action Creators)는 Action을 생성하여 반환하는 함수

//액션 생성자(Action Creators)의 기본적인 모습
//Action을 만들어 반환하는 함수이다.
function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

//실제로 액션을 보내기 위해서는 store.dispatch()메소드를 사용한다.
dispatch(addTodo(text))
dispatch(completeTodo(index))

//액션을 생성한 뒤 자동으로 보내주는 "바인드된 액션 생성자"를 사용할 수도 있다.
const boundAddTodo = text => dispatch(addTodo(text))
const boundCompleteTodo = index => dispatch(completeTodo(index))

3. Reducer

Action은 무엇이 변화되었다는 사실만을 알려줄 뿐, Action만으로 애플리케이션의 상태가 변화하지는 않는다.

Prev State와 Action을 인자로 받아 애플리케이션의 상태를 변화시키는 순수 함수가 Reducer이다.

상태 설계하기

//가장 먼저 State 구조를 설계하고 시작하자.
{
  visibilityFilter: 'SHOW_ALL',
  todos: [{
    text: 'Consider using Redux',
    completed: true,
  }, {
    text: 'Keep all state in a single tree',
    completed: false
  }]
}

//전체적으로 이런 State구조를 만들겠다!! 하는 설계가 시작이다.
{
  visibilityFilter:"String"
  todos:[]
}

Handling Actions

//Reducer의 기본형태
const reducer = (previousState, action) => newState

//이런 형태의 Reducer 함수를
//Array.prototype.reduce(reducer, initialValue)의 콜백함수로 넘길 것이기에
//Reducer라고 부른다.

• Reducer를 순수하게 유지하는 것은 아주 중요한데, 다음 세 가지는 절대로 하지 말아야한다.
  1. 인자를 변경하기.
  2. API호출이나 라우팅 전환같은 사이드 이펙트를 일으키기.
  3. Date.now()나 Math.random()과 같이 순수하지 않은 함수를 호출하기.
• Reducer는 주어진 인자(Arguments)를 계산해서 다음 상태(State)를 반환하기만 하면 된다는 것을 기억하자.

//초기 State 구조
const initialState = {
  visibilityFilter: "SHOW_ALL",
  todos: []
}

//visibilityFilter 속성을 변경하는 Reducer
//이전 state와 action을 인자로 받고 있다.
//Object.assign()메소드를 이용해 새로운 State를 만든 다음 반환한다.
function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })   
    default:
      return state
  }
}

• 여기서 짚고 넘어가야 할 점.
  1. state는 변경하지 않았다. Object.assign()을 통해 복사본을 만들었을 뿐이다.
  2. default 케이스에 대해 이전의 state를 반환했다.
     • 알 수 없는 액션에 대해서는 이전의 state를 반환하는 것이 중요하다.