리덕스(Redux)

Daye Kang·2020년 1월 5일

'Redux'는 애플리케이션(application)의 'state'를 관리하는 자바스크립트의 오픈소스 라이브러리로, 유저 인터페이스(user interfaces)를 만들기 위해 보통 'React', 'Angular'와 함께 쓰인다.

Q. 'context API'를 쓰는 것과 무슨 차이가 있을까?

리덕스에는 여러 유용한 기능들이 있다
'connect', 'useSelector', 'useDispatch', 'useStore' <== context API를 이용할 경우, 다 만들어서 이용해야 하는 기능들

기본적인 최적화가 이미 되어 있다.
하나의 커다란 상태, 모든 글로벌 상태를 하나의 커다란 객체에 넣어서 사용
DevTools
: 아주 유용한 개발자 도구. 어떤 변화가 있었는지, 특정 시점으로 시간을 되돌려도 볼 수 있어 현재 상태 뿐 아니라 과거의 state 상태도 확인할 수 있다.
이미 사용중인 프로젝트가 많아 참고가 가능하다.

액션(Action)
: 'Actions'은 애플리케이션에서 'store'로 데이터를 보내는 정보 역할을 하는 것으로 'store'의 유일한 정보를 보내는 소스다. store.dispatch()로 'store'로 정보를 보낸다.

const ADD_TODO = 'ADD_TODO'

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

'Actions'는 자바스크립트 객체로 표현된다. 그리고 반드시 type 프로퍼티로 'action'이 어떤 값을 담는지에 대해 표현을 해주어야 한다.

'Action Creators'는 'actions'를 담는 함수다.

function addTodo(text) {
  return { // action을 리턴할 수 있어 사용하기 매우 용이하고 간단하다..
    type: ADD_TODO,
    text
  }
}

리듀서(Reducers)
: 'Reducers'는 'store'로 들어온 'actions'에 반응해 '어떻게' 애플리케이션의 상태(state)를 바꿀지에 대해 구체화하는 것이다. 'actions'는 'state'가 어떤 값으로 바뀔지만 명시되어 있을 뿐 어떻게 바뀔지에 대해서는 구체화되어 있지 않다.

리듀서는 이전의 'state' 값과 'action'을 매개변수로 받아 다음 'state'값을 반환한다.

(previousState, action) => nextState

리듀서는 처음의 state 값이 그대로 유지되어야 하는데, 이 값이 다른 값들에 의해 변형되거나 수정이 되면 안 된다. 원래 값은 그대로 유지한채 새로운 값들을 받아 복제되어야 한다.
똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 한다.

예를 들어 new DATE(), Math.random(), axios.get()과 같이 값이 호출될 때마다 바뀌는 함수는 이용하면 안 된다.

그래서 Object.assign()을 이용해 새로 들어온 값들을 복사한다.

스토어는 하나의 애플리케이션에 오직 하나의 스토어만을 가지며 데이터를 나누고 싶을 때는 여러 스토어를 만드는 것이 아니라 'reducer composition'을 통해 데이터를 나눠야 한다.

스토어는 리듀서가 정의되면 createStore()로 만들 수 있다.

import { createStore } from 'redux'
import todoApp from './reducers'
const store = createStore(todoApp)

뭐든 하자