Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. (혹시 워드프레스 프레임워크를 찾아오셨다면, Redux Framework를 확인해보세요.)

Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다.

여러분은 Redux를 React나 다른 뷰 라이브러리와 함께 사용할 수 있습니다. Redux는 매우 작습니다 (2kB, 의존 라이브러리 포함).

New! Learn Redux from its creator:
Getting Started with Redux (30 free videos)

개발자 경험

저는 Redux를 "Hot Reloading with Time Travel"이라는 React Europe 발표를 위해 작업하면서 만들었습니다. 제 목표는 최소한의 API를 가지면서도 완전히 예측 가능한 행동을 하는 상태 관리 라이브러리를 만들어서, 이를 통해 로깅, 핫 리로딩, 시간여행, 유니버셜 앱, 기록과 재생 등을 개발자의 노력 없이도 구현하는 것이었습니다.

영향을 받은 것들

Redux는 Flux의 아이디어를 발전시키되, Elm의 큐들을 가져옴으로써 복잡성은 줄였습니다. 이들을 써보셨는지와 상관 없이, Redux를 시작하는데는 몇 분이면 충분합니다.

설치

안정 버전을 설치하시려면:

npm install --save redux

이는 여러분이 npm을 패키지 매니저로 사용하고 있다고 가정합니다. 만약 아니라면 이들 파일을 unpkg에서 접근할 수 있습니다. 이것들을 다운로드받거나 여러분의 패키지 매니저에 지정해주세요.

대부분의 사람들은 Redux를 CommonJS 모듈로 사용합니다. 이 모듈은 Webpack이나 Browserify, 네이티브 환경에서 redux를 임포트할때 불러와집니다. 여러분이 최첨단을 걷고 있으며 Rollup을 사용한다면 이 역시 지원합니다.

만약 여러분이 모듈 번들러를 사용하고 있지 않더라도 괜찮습니다. redux npm 패키지는 미리 컴파일된 프로덕션과 개발용 UMD 빌드를 dist 폴더에 포함하고 있습니다. 이들은 번들러 없이 바로 사용 가능하고 대부분의 자바스크립트 모듈 로더나 환경과 호환됩니다. 예를 들어 UMD 빌드를 페이지 상의 <script> 태그로 사용하거나 Bower가 설치하게 할 수 있습니다. UMD 빌드는 Redux를 window.Redux 전역변수로 사용하게 해줍니다.

Redux 소스코드는 ES2015로 작성되었지만 CommonJS와 UMD 빌드 모두를 ES5로 미리 컴파일해두었기 때문에 모든 모던 브라우저에서 작동합니다. Redux를 시작하기위해 Babel이나 모듈 번들러를 사용할 필요는 없습니다.

보조 패키지

아마 여러분은 React 바인딩과 개발자 도구도 필요하실겁니다.

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

Redux 자체와는 달리 Redux 생태계의 많은 패키지들은 UMD 빌드를 제공하지 않으므로, 편안한 개발 경험을 위해 Webpack이나 Browserify 같은 CommonJS 모듈 번들러를 사용하기를 권합니다.

The Gist

여러분의 앱의 상태 전부는 하나의 스토어(store)안에 있는 객체 트리에 저장됩니다. 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐입니다. 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 여러분은 리듀서(reducers)를 작성해야 합니다.

이게 다입니다!

import { createStore } from 'redux'

/**
 * 이것이 (state, action) => state 형태의 순수 함수인 리듀서입니다.
 * 리듀서는 액션이 어떻게 상태를 다음 상태로 변경하는지 서술합니다.
 *
 * 상태의 모양은 당신 마음대로입니다: 기본형(primitive)일수도, 배열일수도, 객체일수도,
 * 심지어 Immutable.js 자료구조일수도 있습니다. 오직 중요한 점은 상태 객체를 변경해서는 안되며,
 * 상태가 바뀐다면 새로운 객체를 반환해야 한다는 것입니다.
 *
 * 이 예시에서 우리는 `switch` 구문과 문자열을 썼지만,
 * 여러분의 프로젝트에 맞게
 * (함수 맵 같은) 다른 컨벤션을 따르셔도 좋습니다.
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

// 앱의 상태를 보관하는 Redux 스토어를 만듭니다.
// API로는 { subscribe, dispatch, getState }가 있습니다.
let store = createStore(counter)

// 업데이트를 직접 구독하거나 뷰 레이어에 바인딩할수 있습니다.
// 보통은 subscribe()를 직접 사용하기보다는 뷰 바인딩 라이브러리(예를 들어 React Redux)를 사용합니다.
// 하지만 현재 상태를 localStorage에 영속적으로 저장할 때도 편리합니다.

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

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

상태를 바로 변경하는 대신, 액션이라 불리는 평범한 객체를 통해 일어날 변경을 명시합니다. 그리고 각각의 액션이 전체 애플리케이션의 상태를 어떻게 변경할지 결정하는 특별한 함수인 리듀서를 작성합니다.

만약 여러분이 Flux를 개발하다가 왔다면, 알아둬야 할 중요한 차이점이 있습니다. Redux는 Dispatcher가 없고 스토어 여러개를 지원하지도 않습니다. 대신 루트 리듀싱 함수 하나를 가지는 단 하나의 스토어가 있습니다. 당신의 앱이 커지면 스토어를 추가하는 대신 루트 리듀서를 쪼개서 상태 트리의 각기 다른 부분을 독립적으로 다루는 리듀서들을 만들면 됩니다. 마치 React 앱에는 하나의 루트 컴포넌트가 있고 이 루트 컴포넌트가 여러개의 작은 컴포넌트로 이루어진 것처럼요.

이 아키텍쳐는 숫자 세는 앱 하나 만드는데에는 과도해 보일 수 있지만 이 패턴의 아름다움은 크고 복잡한 앱으로 확장하기 좋다는 점입니다. 이는 또한 액션이 일으키는 모든 변경을 추적함으로써 강력한 개발자 도구를 가능하게 합니다. 여러분은 액션을 재생하는 것만으로 사용자 세션을 기록하고 재생산할 수 있습니다.

제작자로부터 Redux 배우기

Getting Started with Redux is a video course consisting of 30 videos narrated by Dan Abramov, author of Redux. It is designed to complement the "Basics" part of the docs while bringing additional insights about immutability, testing, Redux best practices, and using Redux with React. This course is free and will always be.

"Great course on egghead.io by @dan_abramov - instead of just showing you how to use #redux, it also shows how and why redux was built!"
Sandrino Di Mattia

"Plowing through @dan_abramov 'Getting Started with Redux' - its amazing how much simpler concepts get with video."
Chris Dhanaraj

"This video series on Redux by @dan_abramov on @eggheadio is spectacular!"
Eddie Zaneski

"Come for the name hype. Stay for the rock solid fundamentals. (Thanks, and great job @dan_abramov and @eggheadio!)"
Dan

"This series of videos on Redux by @dan_abramov is repeatedly blowing my mind - gunna do some serious refactoring"
Laurence Roberts

So, what are you waiting for?

Watch the 30 Free Videos!

If you enjoyed my course, consider supporting Egghead by buying a subscription. Subscribers have access to the source code for the example in every one of my videos, as well as to tons of advanced lessons on other topics, including JavaScript in depth, React, Angular, and more. Many Egghead instructors are also open source library authors, so buying a subscription is a nice way to thank them for the work that they’ve done.

문서

오프라인에서 읽기 위한 PDF, ePub, MOBI 버전을 받거나 어떻게 만드는지 알고 싶다면, paulkogel/redux-offline-docs을 보세요.

예시

만약 여러분이 NPM 생태계가 생소하고 프로젝트를 시작하는데 문제가 있거나 위의 코드를 어디에 붙여넣어야 할지 모르겠다면, Redux를 React와 Browserify와 함께 사용하는 simplest-redux-example을 참고하세요.

논의

Reactiflux Discord 커뮤니티의 #redux 채널에 참여하세요.

감사의 말

The Elm Architecture for a great intro to modeling state updates with reducers;
Turning the database inside-out for blowing my mind;
Developing ClojureScript with Figwheel for convincing me that re-evaluation should "just work";
Webpack for Hot Module Replacement;
Flummox for teaching me to approach Flux without boilerplate or singletons;
disto for a proof of concept of hot reloadable Stores;
NuclearJS for proving this architecture can be performant;
Om for popularizing the idea of a single state atom;
Cycle for showing how often a function is the best tool;
React for the pragmatic innovation.

NPM 패키지명인 redux를 넘겨주신 Jamie Paton에게 특별한 감사의 말을 전합니다.

로고

공식 로고를 GitHub에서 찾아보실 수 있습니다.

변경 기록

이 프로젝트는 유의적 버전을 따릅니다. 매 릴리즈는 마이그레이션 설명과 함께 깃헙 릴리즈 페이지에 문서화됩니다.

후원자

Redux 작업은 커뮤니티에 의해 펀딩되었습니다.
이를 가능하게 했던 주요한 회사들을 소개합니다

전체 후원자 명단 보기.

라이선스

MIT

번역

한국어 번역 기여는 Github 저장소로 풀 리퀘스트를 보내주시기 바랍니다.

Read Me

추천사