[React-Native] Redux란? (설치, 소개, 예제)

Redux

---

설치

npm install --save react-redux
npm install --save redux
npm install --save-dev redux-devtools

React 바인딩과 개발자 도구가 필요하다.

Redux 공식 홈페이지에서는 편안한 개발 경험을 위해 Webpack이나 Browserify 같은 CommonJS 모듈 번들러 사용을 권하고 있다.

---

Redux란?

앱의 상태(state) 전부가 하나의 스토어(store) 안에 있는 객체 트리에 저장된다.

상태 트리를 변경하기 위해서는 액션(action)을 보내는 것뿐이다.

액션이 상태 트리를 어떻게 변경할지 명시하기 위해 리듀서(reducers)를 작성해야 한다.

import { createStore } from 'redux'

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

// 앱의 상태를 보관하는 Redux 스토어를 만듭니다.
let store = createStore(counter)

store.subscribe(() =>
  console.log(store.getState())
)

// 내부 상태를 변경하는 유일한 방법은 액션을 보내는 것뿐입니다.
// 액션은 직렬화될수도, 로깅할수도, 저장할수도 있으며 나중에 재실행할수도 있습니다.
store.dispatch({ type: 'INCREMENT' }) // result: 1
store.dispatch({ type: 'INCREMENT' }) // result: 2
store.dispatch({ type: 'DECREMENT' }) // result: 1

리듀서는 그저 이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수이다.

액션이라 불리는 평범한 객체를 통해 일어날 변경을 명시한다.

그리고 각각의 액션이 전체 앱의 상태를 어떻게 변경할지 결정하는 특별한 함수인 리듀서를 작성합니다.

---

결론

여러 개의 타이머를 제작하려고 하는데 어떻게 해야 할지 고민 중에 Redux를 발견했습니다.

한 번 사용해봐야겠습니다.

본문은 React-Native랑 별로 관련이 없는 내용이지만 사용할 것이라서 카테고리를 React-Native로 설정했습니다.