Redux入門

最近、Vue.jsを扱う機会が増えてきてそろそろデータフローのことについても勉強しようと思い、自分が忘れないように色々まとめておきました。

 

まず、Reduxとはなんぞやとなるのですが、

簡単に言えば、データフローの設計概念の1つです。

詳しくは、Reduxは3原則に則って、状態変化の流れを制限することで、

状態を管理できるようにしている。

 

3原則を紹介していきます。

1. ソースは1つだけ

これは、アプリケーション全体の状態(以下state)はツリーの形で、

1つのオブジェクトが作られて、1つのストアに保存される。

・stateが、保存しやすい。→ マルチデバイス対応のアプリケーションが作りやすい。

・stateが、1つだからデバックしやすく、開発しやすい。

→つまり、管理しやすいということ。

 

2. 状態(state)は読み取り専用

状態を変更する手段は、変更内容を持ったactionオブジェクトを作り実行するだけ。

actionオブジェクト

 → アクション内で、受け渡されるデータの実体がもつ属性全体のこと。

   E-R図もチェック!

・ビューやコールバックが状態を直接変更させることはできない。

・変更は一つずつ順番に行われる。

・actionはオブジェクトなので、保存可能であり、テストしやすい。

→つまり、1つのactionのデータを何回でも再利用でき、変更しやすいということ。

 

3. 変更は全てpureな関数で書かれている 

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

→変更の処理する場所は、"Reducer"の認識でおけまる!

・"Reducer"自体は、(状態とアクション)を受け取って新たな状態を返す関数である。

・stateオブジェクトは、使い回さず、新しく作って返す。

・基本1アプリにつき、1"Reducer"としていくが、巨大化したら

 "Reducer"を分割する。

 

とりあえずはここまでにします。🙇‍♂️

 

参考にさせていただいた記事

https://qiita.com/kitagawamac/items/b001839150ab04a6a427