水無瀬のプログラミング日記

プログラムの勉強した時のメモ

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から作る必要は特になかった……
そのうち、上のライブラリを使ってちゃんと作ろうと思います。

参考にさせて頂いたサイト