TIL : Redux



Wow新しいスキルを追加~
反応関数と類形を学び,Stateを用いる方法も習得した.△hookの使い方にはまだ慣れていませんが…先週HAまで等級だけやっていたので.🤓)
Redux利用でReactの方が使いやすいので楽しみです!

1.Redux


Reduxは,反応素子内で状態を容易に処理するために,これまで用いられてきたライブラリである.
(最初はReduxはReact用のツールだと思っていましたが、最初はReactを必要とせずに使用できる状態管理ライブラリであることを教えてくれました.)🤩)
リアクターを使用して状態を変更する場合、サブエレメント間で直接状態を伝達することはできません.したがって、親エレメントを介して状態を常に伝達する必要があります.授業内容に単純な構造面の問題がないが,複雑な構造で素子を生成すると,このような伝達状態は非常に複雑であり,問題が発生した場合のメンテナンスとメンテナンスが困難である.
だから使うのは今日習ったReduxです.
Reduxには3つの原則があります.
1. Single source of truth
△同じデータは常に同じ場所からインポートされ、Storeという場所からインポートされます.
2. State is read-Only
(Reduxはアクションという名前のオブジェクトを使用してステータスを変更します.)
3. Changes are made wiht pure functions
(変更は純関数のみです.Reducerに関連しています.)

2.Reduxに必要な概念


1. Store


ステータスが管理されているのは1つのスペースしかありません!!
コンポーネントとは別にStoreという空間があり、アプリケーションに必要なステータス情報を保持し、これらのコンポーネントは情報を携帯します.

2. Action


JavaScriptのオブジェクト!
Actionオブジェクトは、StoreにAppのデータを転送します.
{
  type : "ORDER",
  drink : {
    menu : "Americano",
    size : "Grande",
    iced: false
  }
}
タイプを保存し、必要な情報をオブジェクトに入れて転送する必要があります.(サンプルコードを確認)

3. Reducer


現在の状態とアクションを使用して、次の状態を作成します.

アクションオブジェクトはDispathに渡され、DispathはReducerを呼び出して新しい状態を作成します!
この文章は今暗誦させていただきます.🥸)
これらの式は適用される法則です.データは一方向にしか流れないからです.

4. Overview


Redux Cycle ...

3.Reduxのメリット


1.状態を予測可能にする.
2.メンテナンスが容易
(複雑な構成部品を使用してエラーを検索する場合は、関連するすべての構成部品をチェックする必要がありますが、Reduxを使用してリポジトリをチェックするのは簡単です!)
3.デバッグに有利(actionとstate logを記録)
4.テストしやすい.

の最後の部分


ReactもReduxから...少し心配ですが、それを利用すれば複雑な状態を簡単に使えるので、コンセプトを熟知し、印刷でreactやreduxを熟知!
不思議なことに、新しいスキルを学ぶことで、勉強を始めたばかりの不便を解決する方法があります.😘 やはり多様な技術を身につけると、ネット開発に有利になり、仕事をするときにも便利になると思います.
DOMやJavascriptを使ってWebを作成することに慣れていますが、すぐに慣れてきて、Webアプリケーションも簡単に作成したいと思います