[React] Redux

8624 ワード
テキストリンク

リデス、背後-歴史



一方向データストリームの「Flux」モデルを採用することでMVCモデルの複雑さを向上
2015年には、React+Fluxの構造に「Reducer」を組み合わせたグローバルステータス管理ライブラリ「Redux」が登場する.Redux = (Red)ucer + Fl(ux)
距離の遠い構成部品をワイヤで接続したり、プロジェクト全体で参照する必要があるステータス値などに直接アクセスしたりすることもできます.

道徳三原則


真実は一つの源から来ている📁


アプリケーションのすべてのステータスは、1つのストレージ領域のオブジェクトツリー構造に格納されます.すべての変更がストレージに記録されているため、データ・ストリームは常に「ストレージ領域」である必要があります.

-ステータスは読み取り専用📑


状態を変える唯一の方法は、dispatch(like dispatch)を呼び出し、何が起こったかを記述する動作オブジェクト(like dispatch)である.

-変化は純粋な関数で記述する必要があります📖


アクションがステータスツリーを変更する方法を指定するには、プログラマは純粋な実行者を作成する必要があります.
Reduserは、以前のコンダクタンス値とアクションオブジェクトを入力として受け入れて新しいコンダクタンス値を作成する純粋な関数です.
:fetch、new Date()、Mathなどの非同期ロジック.random()は同じ入力で異なるreturnをテストできませんテストコードの作成が容易です.

道徳用語


1. action

export const addCart = (item) => { // 액션 "생성 함수"
  return {
    type: "ADD_ITEM", // 액션 "객체"
    payload: item,
  };
};
  • 動作はtype属性を持つjsオブジェクトです!
  • アクション作成関数アクションオブジェクトを生成!
  • dispatchメソッド呼び出し
    • を追加

    2. useDispatch

    const dispatch = useDispatch()

const [store, dispatch] = useState() // 여기서 state는 store
<FooComponent store={store} dispatch={dispatch} /> // 여기서 FooComponent는 내가 컨트롤하는 컴포넌트
  • ショップの内蔵関数で、ショップにアクションオブジェクトを渡すことができます.「動作が起こる」と理解できる.
  • ショップ(親)と構成部品(子)のset関数

    3. reducer

    (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 });
  • Reduserは、動作発生時に新しい位相値を作成する関数です(javascript関数のみ!!)

    • 4. store

    import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes";

import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./store/reducers";

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <Routes />
  </Provider>,
  document.getElementById("root")
);
  • ストアは単一のオブジェクトであり、還元商価値を有し、プロジェクトの任意の場所で
    • にアクセスすることができる.
    XRP - Account Deletion
    userefによるチャットUIの実装