Redux 3가지 원칙 정리

📍  The truth comes from one source

 

App의 모든 상태는 하나의 저장소에 객체 트리 구조로 저장된다.

 

console.log(store.getState());

/*
 * {
 *    visibilityFilter: 'SHOW_ALL',
 *	  todos: [{
 *	    text: 'Consider using Redux',
 *      completed: true,
 *    }, {
 *		text: 'Keep all state in a single tree',
 *      completed: false
 *    }]
 * }
*/

 

 

📍  State is read-only

 

상태 변경은, 액션 객체(어떤 상태 변화가 일어나야하는 지 기술된 객체)를 통해서만 일어난다.

 

store.dispatch(action: Object)

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1;
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

 

 

📍  Changes should be written as pure functions

 

액션을 인자로 받아 상태를 변화시키는 reducer는 순수 함수로 만들어야 한다.

reducer 는 side effect 를 발생시키지 않는다.

 

function visibilityFilter(state = 'SHOW_ALL', action){
  switch(action.type){
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
    default:
      return state;
  }
}

function todos(state = [], action){
  switch(action.type){
    case 'ADD_TODO':
      // 기존의 상태에 completed가 false로 설정된 할일이 추가된 
      // 새로운 상태를 리턴하는 걸 확인할 수 있다.
      return [
        ...state,
        {
          text: action.text,
          completed: false;
        }
      ]
    case 'COMPLETED_TODO':
      // 기존의 상태에 해당 action의 인덱스에 해당하는 객체만 completed를 true로 바꿔서
      // 새로운 상태를 리턴하는 걸 확인할 수 있다.
      return [
        ...state.slice(0, action.index),
        Object.assign({}, state[action.index], {completed: true}),
        ...state.slice(action.index + 1)
      ]
    default:
      return state;
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)