redux

Redux入門 1日目 Reduxとは(公式ドキュメント和訳)

More than 1 year has passed since last update.

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(ソースは1つだけ)

アプリケーション全体の状態(state)はツリーの形で1つのオブジェクトで作られ、1つのストアに保存される


  • 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では状態のオブジェクトに変更を行なうことはない。新しい状態オブジェクトを作る。

※ 以下、割愛

続き Redux入門 2日目 Reduxの基本・Actions