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

  • 331
    いいね
  • 2
    コメント

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