Angular6 + Reduxで簡単なToDoアプリを作る
はじめに
Reduxについて勉強するために、Redux + Angularで簡単なアプリを作成する。
(React知らないので、Angularでやります・・・)
作成したアプリはこちらから
Reduxとは
Facebookが提唱しているFluxと言うアーキテクチャの派生形。
Reactと使われているのが多いイメージだが、Reactに依存している訳では無いので他でも使用可能。
Reduxの構成要素
Action
Actionは何をするかと言う情報を持ったオブジェクト。
UIからStoreへ送るデータとなる。
そしてStoreのための唯一の情報源となる。
Actionは単なるJavascriptのオブジェクトである。
ただし、Actionのタイプを示すtype
プロパティを必ず持つ。
{ type: 'ADD_TODO' , text: 'Reduxについてまとめて記事を書く' };
ActionCreator
Actionを生成する関数のこと。
単純にActionを返す。
Actionと混同しやすいため、要注意。
function addTodo(text: string) { const newTodo: TodoAction = { type: 'ADD_TODO' , text: text }; return newTodo; }
State
Reduxでは、すべてのアプリケーションの状態は1つのオブジェクトとして保持される。
その状態を保持しているのがState。
{ todos: [ { text: 'Reduxについてまとめて記事を書く', completed: true, }, { text: '記事をアップロードする', completed: false } ] }
Reducer
ActionとStateをもとに新しいStateを作成して返す。
Reducerはピュアな関数であることが必須。
そのため、下記のことは厳禁。
※ピュアな関数:インプットが同じなら毎回必ず同じ結果が変える関数
* 引数に手を加える
* 副作用を起こす。例)APIコールやページ遷移
* 純粋ではない関数を呼び出す。 例)Date.now() や Math.random()
Reducerは必ずピュアな関数でなくてはいけないため、
引数が与えられると、次の状態を計算して返す。
public reducer(action: any, state: any) { switch (action['type']) { case 'ADD_TODO': const retState: Array<ITodoState> = state.concat(); retState.push({ text: action['text'] , completed: action['completed'] }); return retState; } }
Store
StoreはActionとReducerをまとめるオブジェクト。
下記のような役割を持つ。
* アプリケーションの状態を保持する
* getState()による状態へのアクセスを許可する
* dispatch(action)による状態更新を許可する
* subscribe(listener)によりリスナーを登録する
* subscribe(listener)で返される関数により、リスナーの登録解除を処理する
Storeはアプリケーション中に1つのみ。
複数のStoreを作ってはいけない。
Reduxの3大原則
Reduxは以下の3大原則に沿って設計されている。
1. Single source of truth
アプリケーション内でStoreは1つのみとし、Stateは単独のオブジェクトとしてStoreに保持される。
2. State is read-only
Stateを直接変更することはできず、actionをStoreへdispatchすることでしかStateは変更できない。
3. Mutations are written as pure functions
Stateを変更する関数(Reducer)はpureな関数にする。
まとめ
Reduxの勉強のために1から?簡単なTODOアプリを作ってみた。
(追加しか出来ない上に、どこにも保存されていませんが……)
ちなみに、Angularにも便利なライブラリがあるらしく、1から作る必要は特になかった……
そのうち、上のライブラリを使ってちゃんと作ろうと思います。