22036 Reduxの使用方法

20176 ワード
React 航海 TIL テキストリンク
  • リドスとは何か、用語は何かを調べました.
  • https://velog.io/@nulee1000/220325-%EB%A6%AC%EB%8D%95%EC%8A%A4
  • 今日はRidexの使い方について説明します

    タンデムワイヤの設定


    1.Reduxパッケージのインストール

  • Ridexを使用するプロジェクトでは、
    次のコマンド
    • を入力します.
    yarn add redux react-redux
  • Redux:Reduxパッケージ
  • 反応-redux:反応器で使いやすいパッケージ

    • 2.冗長モジュールの作成


  • 通常reduceを使用する場合は、aciton、actionCreator、reduceを外観別に書きます
    (アクションはアクションによって作成され、アクション作成関数はアクションによって作成され、リダイレクトはリダイレクトによって作成されます)

  • 外観ではなく機能によるワイヤ構造の作成
    アクション、アクション作成者、および減速機を含むファイル

  • デス構造の例は、
    • である.
    // widgets.js

// 액션 타입 정의
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';

// 액션 생성함수 정의
export function loadWidgets() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE, widget };
}

export function updateWidget(widget) {
  return { type: UPDATE, widget };
}

export function removeWidget(widget) {
  return { type: REMOVE, widget };
}

// 초기값정의
const initialState = {
  a: 'b',
  c: 'd',
}

// 리듀서 작성
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}

// side effects, only as applicable
// e.g. thunks, epics, etc
export function getWidget () {
  return dispatch => get('/widget').then(widget => dispatch(updateWidget(widget)))
}

    3.動作タイプの定義

    // Action 타입 정의
const LOAD   = 'my-app/widgets/LOAD';
const CREATE = 'my-app/widgets/CREATE';
const UPDATE = 'my-app/widgets/UPDATE';
const REMOVE = 'my-app/widgets/REMOVE';
  • 徳氏構造を使用する場合、文字列の前にモジュール名を付けます.以下に示します.
  • は、他のモジュールで記述可能な動作との衝突を回避することを目的とする
    • .

    4.アクション作成関数の定義

    // 액션 생성함수 정의
export function loadWidgets() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE, widget };
}

export function updateWidget(widget) {
  return { type: UPDATE, widget };
}

export function removeWidget(widget) {
  return { type: REMOVE, widget };
}
  • で定義する動作タイプに基づいて動作関数
    • を作成する.
  • 動作生成関数を定義する場合は、上記のようにexportを付けなければなりません
  • ここで作成された関数は、
    • を使用して構成部品にバインドおよびロードされる.

    5.初期値、Reduserの作成

    // 초기상태 정의
const initialState = {
  a: 'b',
  c: 'd',
}

// 리듀서 작성
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    // do reducer stuff
    default: return state;
  }
}
    変数
  • を初期値として定義し、
  • リッドパラメータ、初期値
  • {}のようにNull値
    • を保持できます.

    ショップの作成


    1.組合せReducer組合せReducer


  • 複数のリスナーがある場合は、reduxの組み込み関数combine Reducersを使用します.
    再生器を一つにする仕事

  • 複数の役に分かれた役をコスプレ者と呼び、
    二つを一つにした李杜瑟はルート李杜瑟と呼ばれている.

  • まずconfigStoreをproject/src/redoxディレクトリに構成します.jsの作成
    • import { combineReducers } from 'redux';
import dic from "./modules/dic";
// 위의 코드는 위에서 작성한 모듈

export default combineReducers({
  moudle1,
  // 다른 리듀서를 만들게되면 여기에 넣어준다
});

    2.ショップの作成

  • アプリケーション内のショップのルールに従って、
  • configStore.jsにショップを1つ作れば
    • import { createStore, combineReducers } from "redux";
import dic from "./modules/dic";

const rootReducer = combineReducers({ dic });
const enhancer = applyMiddleware(...middlewares);

//이 부분이 스토어를 만들고 선언하는 부분
const store = createStore(rootReducer);
export default store;
  • アプリケーションが起動したindex.jsでインポートおよび使用し、
    輸出違約
    • import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/configStore";
ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById("root")
);
  • 反作用-プロバイダは、アプリケーションの最上位コンポーネントを囲むReduxパッケージのコンポーネントです.
    上記で作成したstore
    • をpropsで送信
  • このセクションは、反応プロジェクトアプリケーションが開始したindexです.jsで
    • を記述できます

    構成部品での冗長データの使用

  • リドスにも「リドスフック」と呼ばれるフックが存在する.
    ユーザーセレクタ、
  • データ付き
  • connect関数を使用せずにreduceのステータスをクエリーできます.
    • useDispatch、
  • データ更新用
  • で生成する動作は、useDispatchで
    • を生成することができる.
    import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";

function Home() {
  const dicWord = useSelector((state) => state.dic.list);
}
const dispatch = useDispatch();
  • usStateに入るstateはreduceが所有するすべてのデータ
    • を表す.
  • この方法は
    • を用いることができる.
    zipファイルを解凍する
    [最下層からの深さ学習]#14レッスンはコーディネートにぴったり