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