読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

いい加減、Redux入門する。

React.js Redux

します。

手始めにQiitaのそれっぽいポストを読みます。この記事は、その勉強メモになります。

 

1日目 Reduxとは

qiita.com

 

背景

Reactの登場によって、Reactに非同期とDOM操作を任せられるようになった。ただし、State(状態)の管理は開発者に委ねられている。

Reduxはそこを解決する。

 

3原則

1. Single source of truth (ソースは1つだけ)

アプリケーション全体の状態は1つのオブジェクトとして作られ、1つのストアに保存される。(ストアってなんやねん。。)

→利点:stateが1つだからデバッグしやすい。開発しやすい。

 

2. State is read-only(状態は読み取り専用)

状態を変更する手段は、変更内容をもったactionオブジェクトを発行して実行するだけ。

→利点:ビューやコールバックは状態を変更しない。変更は1つずつ順番におこなわれる。actionはオブジェクトなので、保存可能でありテストしやすい。

 

3. Mutations are written as pure functions(変更は全て純粋関数で書かれる)

アクションがどのように状態を変更するかを、"Reducer"で行う。

Reducerは状態とアクションを受けて、新しい状態を返す関数。現在のstateを変更するわけではなく、新しいstateオブジェクトが作成される。Reducerは分割してよい。

 

比較

Flux

更新ロジックの名称が異なる。FluxではStoreだし、ReduxではReducer。

アプリケーションの状態が直接変更されない点は共通。状態変更はアクションを通じて為される。

Fluxのdispatcherが、Reduxで言う所のRedux。

 

 

以上が1日目の記事でした。

2日目以降の記事はたくさんのコードサンプルを含むので、実際に書いて習おうと思います。