Redux初心者向けです。というか私が初心者です。
Reduxに触れてみようと思って、まずは公式のGithubのドキュメントでも読んでみるか、と自分へのメモも兼ねてざっくりとした和訳をして行きます。
公式github
Redux入門 1日目~6日目までの部分を短くまとめた記事も書きました。
ダイジェスト版
1.1 Motivation(背景)
http://rackt.org/redux/docs/introduction/Motivation.html
近年、Javascriptのシングルページアプリケーションは複雑になってきてstate(状態)を管理するのはしんどくなってきた。新機能開発するのもバグ修正するのもかなり辛い。
根本的に、「変化」と「非同期」を"同時"にコントロールするのは人間には無理がある。Reactはその問題に対してViewレイヤーで非同期と直接DOM操作を取り除くことで解決したけども、state(状態)の管理は開発者に委ねられたままなので、Reduxはそこを解決するためにある。
Reduxは3原則に則って状態変化の流れを制限することで、状態を管理できるようにしている。
1.2 Three Principles (3原則)
###1. Single source of truth(ソースは１つだけ)
アプリケーション全体の状態(state)はツリーの形で１つのオブジェクトで作られ、１つのストアに保存される
- stateが保存しやすいので、ユニバーサルアプリケーションがつくりやすい
- stateが一つだから、デバッグしやすい、開発しやすい
2. State is read-only(状態は読み取り専用)
状態を変更する手段は、変更内容をもったactionオブジェクトを発行して実行するだけ
- ビューやコールバックが状態を直接変更させることはできない
- 変更は一つずつ順番に行なわれる
- actionはオブジェクトなので、保存可能であり、テストしやすい
3. Mutations are written as pure functions(変更はすべてpureな関数で書かれる)
アクションがどのように状態を変更するかを「Reducer」で行う。
- 「Reducer」は状態とアクションを受けて、新しい状態を返す関数である。
- 現在のstateオブジェクトを変更することはせずに、新しいstateオブジェクトを作って返すというのがポイント。
- 開発するときは、最初はアプリケーションで一つのReducerを用意して、巨大化してきたらReducerを分割していく
1.3 Prior Art (既存技術との比較)
Flux
ReduxはFluxの実装かといればYesでもありNoでもある。
Fluxの要素を取り入れている部分も多い。
- 更新ロジックを一カ所にまとめている(FluxならStore, ReduxならReducer)
- アプリケーションが状態を直接変更することはなく、状態の変更はアクションですべておこなわれる
Fluxとは異なる点
- Reduxにはdispatcherがない。(Reducerで担う)
- Reduxでは状態のオブジェクトに変更を行なうことはない。新しい状態オブジェクトを作る。
※ 以下、割愛