Redux_1

Redux?
JavaScriptアプリケーション用予測可能ステータスコンテナ
reduceは、JavaScript用のステータス管理フレームワークです.
Reduxは、動作が一貫しており、異なる環境で動作し、テストしやすいアプリケーションを作成するのに役立ちます.また,タイムトラベル型デバッガと組み合わせたリアルタイムコード修正などの開発者経験も提供している.
Why Redux?
アプリケーションのすべてのステータスは、オブジェクトツリー構造でリポジトリに格納されます.
🤹🏻‍♀️リドスの登場背景を見てみましょう.

1.MVCモード

通常、開発者はMVC(model-view-Controller)設計モデルを使用して開発を行う.このMVCモードは,アプリケーション開発において非常に広く用いられている設計モードである.しかし、このモードに問題があり、FacebookはFluxの設計モードを定義しています.
コントローラはモデル内のデータをクエリーまたは更新します.
モデルの変化はビューに反映されます.また,ユーザがviewでデータを入力すると,ユーザの入力もモデルに影響を及ぼす.
MVCモードでの質問
Facebookのような大規模なアプリケーションでは、MVC構造が速すぎて複雑になっています.構造が複雑になりすぎて、新しい機能を追加するたびに大きな問題が発生します.Facebookが発見した根本的な問題は、アプリケーション内のデータストリームです.ユーザとのインタラクションはviewによって行われるため,ユーザ入力に応じてviewがモデルを更新する必要がある場合がある.これらの変更は非同期である可能性があり、1つの変更によって複数の変更が発生する可能性があります.
すなわち、データストリームを正確に理解し、デバッグすることは難しい.

2.Flux design pattern

解決策は、一方向データストリームです.
データは一方向に流れ、新しいデータを加えた後、最初からフローを再起動するように設計されています.このアーキテクチャはFluxと呼ばれています.

残念な流れの問題
1.ショップ内のコードは、アプリケーションのステータスを削除せずに再ロードできません.
トラフィックにおいて、ストレージは以下の特性を有する
(ステータスを変換するためのロジック、現在のアプリケーションのステータス)
==>ホット・リロードの場合、1つのストレージ・オブジェクトに上記の2つのプロパティがある場合、問題が発生します.
2.アプリケーションのステータスは、各アクションで再記録されます.
データストリームは一方向であるため、ビューはDispatcherから動作を送信することができ、Dispatcherは同じ動作をStoreの修正によってビューに反映する.
この流れの問題を補いReduxが出現した.
冗長性は、フラックス構造をより容易に使用するためのライブラリです.すべてのデータはstoreに格納され、コンポーネント間で直接交流するのではなく、Dispatcherによって操作されます.Componentはリポジトリ内の情報を購読し、データが変化したときにビューを再表示します.
DOMとDOMが直接接続されていると複雑度が上昇します.
ステータス・ベースの一方向データ・ストリームでは、ステータス値とレイアウトを分離できます.
しかし,propsドリルなどの問題により,性能低下や複雑度上昇の問題が再び露呈した.

各構成部品は1つ触れる必要はありません(ショップに格納されており、構造的にも簡潔で、すべての構成部品に触れるとレンダリングになるので、効率が低いので、なぜReduxが必要なのか分かります!)

Ridexを使用する場合に従うべき3つの原則
1.すべてのコンダクタンス値を1つのオブジェクトに格納します.
2.常臍値は不変の対象である.
一定の値は、アクションオブジェクトのみで変更されます.

const incrementAction={
  type:'INCREMENT',
  amount:123,
};
const conditionalIncrementAction={
  type:'CONDITIONAL_INCREMENT',
  amount:2,
  gt:10,
  lt:100.
};
store.dispatch(incrementAction);
store.dispatch(conditionalIncrementAction);

動作オブジェクトにtype属性値が存在する必要があります.アクションオブジェクトをtypeプロパティ値で区切ります.type属性値に加えて、常臍値を変更するための情報が残ります.動作オブジェクトとともにdispatchメソッドを呼び出すと、ステータス値が変更されます.

reduce定数を変更する唯一の方法は、アクションオブジェクトとともにdispatchメソッドを呼び出すことです.
3.定数は純関数のみで変更できます.
リデスでは定数を変える関数を리듀서と呼ぶ.

(state,action)=>nextState

reducerは、以前の定数とアクションオブジェクトを入力として受け入れ、新しい定数の純粋な関数を作成します.

ビューで動作をトリガし、dispatchをトリガし、リフレッシュ器でショップを更新し、更新してビューに入ります.

1）動作

タイプの属性値を持つJavaScriptオブジェクト

アクション作成関数

アクションオブジェクトの作成

動作オブジェクトをdispatchメソッド呼び出し(useDispatch)に入れる
(dispatchはsetStateに類似)

アクション関数を生成するアクションオブジェクトは、リダイレクトによってストアを更新します.

export const addCart = (item) => { // 액션 "생성 함수"
  return {
    type: "ADD_ITEM", // 액션 "객체"
    payload: item, //add_item이라는 액션이고 payload는 변경가능한 key값. 타입속성 그내용을 말하는게 payload:item부분
  };
};

useDispatch

const dispatch =useDispatch()

ストアの内蔵関数として,動作オブジェクトをストアに渡す.

dispatchパラメータ要求伝達動作オブジェクト

dispatchを実行すると、動作オブジェクトはReducerに転送され、Reducerで条件と動作が予め定義されます.ショップはタイプに応じて更新されます.

2）減速機

reduceは、前のショップと交換する動作で次の状態に戻ります.すなわち、リダイレクトは、動作が発生したときに新しい定数を作成する関数である.

(state, action) => nextState // state(혹은 store)와 action 객체를 받고 다음 state 리턴

// cartReducers.js
function cartReducer(state = INITIAL_STATE초기값, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return [...state, action.payload]; // 스토어의 이전 상태에 새로운 item을 추가
		case "DELETE_ITEM":
			return [...action.payload]
    default:
      return state; // 해당 사항 없으면 이전 상태를 그대로 리턴
  }
}

// store/reducer/index.js
import { combineReducers } from "redux";
import cartReducer from "./cartReducer";

export default combineReducers({ cartReducer:cartReducer });
//리덕스에서 제공하는 함수 combineReducers(리듀서들을 합쳐주는 역할)
//cartReducer:cartReducer는 cartReducer로 줄여서 쓸 수 있음 

リダイレクタは、ショップとアクションオブジェクトを受信し、新しいショップの関数を返すためにブレンドします.
タイプをチェックし、条件文でタイプに一致する論理を実行し、次のステータスに戻るだけです.

リダイレクタは、動作発生時に新たな状態値を作成する関数(通常js関数)

である.

リドスでは、ショップは1つです.storeという名前のオブジェクトにkeyとvalueを入れればいいです.

3）ショップ

ストアは、リカバリツリーによって提供されるコンポーネントにプロジェクトの任意の場所でアクセスできるリカバリステータス値を持つ単一のオブジェクト(1つ)です.

アクション=>ミドルウェア=>リカバリ=>ショップ更新=>コンポーネント更新
ショップは、アクションが発生したときにミドルウェア関数を実行し、リダイレクトを実行して定数値を新しい値に変更します.

useSelector

const items=useSelector(
  (store)=>{
    return store.cartReducer 
);

storeの特定のコンテンツはuserSelectorで取得できます.

🧐 Ducks Pattern?

企業提携では,アヒル型モデルを用いた.
アヒルモードは、Reduser関数、アクションタイプ関数、アクション生成関数を1つのファイルに書き込む方式です
Ducks構造の規則
1.reduce()という名前の関数を常にエクスポートする必要があります.
2.モジュールのアクションジェネレータを常に関数形式でエクスポートする必要があります.
3.npm-module-or-app/reduce/ATION TYPE形式の動作タイプを常に持たなければならない.
4.actionタイプをUPPER SNAKE CASEにエクスポートできます.
=>Ducks構造は、機能を中心にファイルを分割します.この構造の利点は、単一の機能を記述する場合でも、変更する場合でも、1つのファイルを処理するだけで済むため、コードをより直感的に記述できることです.
注:WECODE