1 つの記事で React における Redux の初期の使用を理解する

1 つの記事で React における Redux の初期の使用を理解する

Redux はデータ状態管理プラグインです。React や Vue を使用してコンポーネント化された SPA プログラムを開発する場合、コンポーネント間での情報共有は非常に大きな問題となります。例えば、ユーザーがログインすると、クライアントはユーザー情報(ID、アバターなど)を保存し、システムの多くのコンポーネントがこの情報を使用します。この情報を使用する際に、毎回再度取得するのは非常に面倒です。そのため、各システムには、複数のコンポーネントで使用される共通情報を管理する機能が必要です。これがreduxの役割です。

これまで redux に触れたことがない開発者の方は、ぜひじっくりとご覧いただければと思います。私も多くのブログに期待して、自分でもゆっくりまとめています! ! ! !大物が一つずつ探すよりはいいです。

'react' から React、{ Component、Fragment } をインポートします。

//クラスをインポートimport { connect } from 'react-redux';

//フック import { useSelector, useDispatch } from 'react-redux'

'../../redux/actions/count' から { add, clear } をインポートします。


//表示コンポーネントをフックする const CountItem = (props) => {
    // const を分解する {
        カウント、
        フラグ、
        追加、
        クリア
    } = 小道具
    戻る (
        <>
            <h2>現在の合計: {count}</h2>
            <h3>現在のフラグ: {flag ? 'true' : 'false'}</h3>
            <button onClick={add}>+1 をクリック</button>
            <button onClick={clear}>クリア</button>
        </>
    )
}

// コンテナコンポーネントをフックする const Count = () => {
    定数 count = useSelector(state => state.sum)
    const flag = useSelector(state => state.flag)
    定数ディスパッチ = useDispatch()

    定数countAdd = () => {
        コンソールログ(追加.タイプ)
        ディスパッチ(追加(1))
    }

    定数clearNum = () => {
        ディスパッチ(クリア())
    }

    戻り値: <CountItem count={count} flag={flag} add={countAdd} clear={clearNum} />
}

エクスポートのデフォルト数



// クラス表示コンポーネント // クラス Count は Component を拡張します {
// 追加 = () => {
// // 通知の再実行
// this.props.add(1);
// };
// クリア = () => {
// this.props.clear();
// };
// 与える() {
// 戻る (
// <フラグメント>
// <h2>現在の合計は: {this.props.count}</h2>
// <h3>現在のフラグ: {this.props.flag ? 'true' : 'false'}</h3>
// <button onClick={this.add}>+1 をクリック</button>
// <button onClick={this.clear}>クリア</button>
// </フラグメント>
// );
// }
// }

// クラスコンテナコンポーネント // デフォルトのエクスポート connect(
// // 1. 状態 // state => ({ count: state.sum, flag: state.flagState }),
// // 2. メソッド // { add, clear }
// )(カウント);

基本的な使い方は、ほぼこのようになります。on hook で使用する主要なメソッドは、useSelector で redux の状態を使用し、dispatch で Reduce を呼び出すことです。クラス コンポーネントでは、connect を使用して状態とメソッド (reduce) を関連付けます。

ここでの難しさは、reduceとstateにあります

ここでのreduceとは何ですか?

上記のコードでは、add メソッドと clear メソッドを使用しました。これらの 2 つのメソッドを実装するには、新しい js ファイルを作成します。

// Count コンポーネントのアクション オブジェクトを作成します // 定数をインポートします import { ADD, CLEAR } from '../constant';

// アクションオブジェクトを追加する関数を作成する export const add = data => ({
    タイプ: ADD、
    データ、
});

// アクションオブジェクトをクリアする関数を作成する export const clear = data => ({
    タイプ: クリア、
    データ、
});

上記には定数があります。これは、actionType の統一管理を容易にするためのものです。対応するアクション オブジェクトを作成すると、コードをモジュール化するのに役立ちます。
それを貼り付けてconstant.jsを作成し、

エクスポート const ADD = 'add';
エクスポートconst CLEAR = 'clear';

この時点でアクション オブジェクトはほぼ定義されており、リデューサーを管理する必要があります。つまり、ディスパッチは上記のアクションオブジェクトを配布して状態の更新を実装する。

リデューサーフォルダではcount.jsを定義します

// Countコンポーネントのリデューサーを作成する
// リデューサーは2つのパラメータを受け取ります: 前の状態のpreState、アクションオブジェクトのアクション

'../constant.js' から {ADD、CLEAR} をインポートします。

// 初期状態を設定します。const initState = 0;

デフォルトの関数 addReducer(preState = initState, action) をエクスポートします。
    // アクションから型とデータを取得する
    const { 型、データ } = アクション;
    //型に基づいてデータの処理方法を決定する switch (type) {
        ケース追加:
            preState + データを返します。
        ケースクリア:
            0を返します。
        // 初期化アクションのデフォルト:
            preState を返します。
    }
}

上記のメソッドは、型分布を呼び出すためにディスパッチを使用する必要があります(強調追加)

これで使い方は完了です。次に、reactプロジェクトにreduxを設定しましょう。

ここで逆の順序で語るのは意味がないので、必要ありません。
主な設定は次のとおりです
store.js の設定とグローバルストアの使用

ストアの世界的な利用状況の初見
ルート ルートの下にプロバイダーを使用して App をラップします。

'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。
'./App.jsx' からアプリをインポートします。
'./redux/store' から store をインポートします。
'react-redux' から { プロバイダー } をインポートします。

ReactDOM.render() は、
    // プロバイダはAppをラップします。目的: Appのすべての子孫コンテナコンポーネントがストアを受け取ることを可能にします
    <プロバイダーストア={store}>
        <アプリ />
    </プロバイダー>,
    ドキュメント.getElementById('ルート')
);

ここにredux/store.jsがあります。コードを参照してください

// ドキュメント全体にはストア オブジェクトが 1 つだけあります。createStore は 2 つのパラメータを受け取ります。1 つ目は状態ツリー、2 つ目は処理されるアクションです。
//applyMiddleware はすべてのミドルウェアを配列に集約し、それらを順番に実行して、非同期的に処理します。import { createStore, applyMiddleware } from 'redux';
//ミドルウェアimport thunk from 'redux-thunk';
//すべてのリデューサーを要約する
'./reducers/index' から allReducers をインポートします。
//Google のデバッグ ツールの具体的な使用方法は次のとおりです: Baidu import { composeWithDevTools } from 'redux-devtools-extension';

// ストアを公開する
デフォルトのcreateStore(allReducers、composeWithDevTools(applyMiddleware(thunk)))をエクスポートします。

この記事はこれで終わりです。まだ、この記事の実行プロセスと原則の一部が理解できていません。今後もさらに理解を深め、学習する必要があります。

上記は、React で redux を使用する方法に関するこの記事の詳細な内容です。React で redux を使用する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • react-redux における connect の使い方と原理分析の詳細な説明
  • JavaScript 状態コンテナ Redux の詳細な説明
  • reduxの動作原理と使い方の説明

<<:  自作の Windows サーバーに egg アプリケーションを展開する方法 (画像とテキスト付き)

>>:  Windows サーバー ポートを開きます (例としてポート 8080 を使用します)

推薦する

docker を使用して Linux 環境に Springboot パッケージをデプロイするチュートリアル

springboot には tomcat サーバーが組み込まれているため、jar パッケージにパッケ...

Vue はトークンの有効期限が切れると自動的にログインページにジャンプする機能を実装します

このプロジェクトは最近テストされ、テスターから、トークンの有効期限が切れたため、ルートが自動的にログ...

CentOS の起動時に RabbitMq ソフトウェアを自動的に起動する方法

1. /etc/init.dディレクトリに新しいrabbitmqを作成します。 [root@loca...

Windows 10 で MySQL を完全にアンインストールして再インストールするための詳細な手順

さまざまな理由で、誰もが MySQL を再インストールする必要があると思います。 MySQL と Q...

Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー

目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...

HTML テーブルに複雑なテーブル ヘッダーを実装するためのサンプル コード

複雑な表を作成するには HTML を使用します。複雑なテーブルでは通常、td の rowspan 属...

MySQLがクエリキャッシュをキャンセルした理由

MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...

JSデータ型検出のさまざまな方法の概要

目次背景データ型を決定する方法は何ですか? 1. typeof を使用して基本データ型を決定します。...

MySQL 外部キー制約の詳細な説明

公式ドキュメント: https://dev.mysql.com/doc/refman/5.7/en/...

JS でモバイルのインタラクティブ エクスペリエンスを向上させる方法

目次1. 即時フィードバック1.1 ボタンからの即時フィードバック1.2 継続的なフィードバック1....

Hadoopカウンターとデータクリーニングの適用

データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...

Webフロントエンドスキル概要(個人の実務経験)

1. 今日、ページを作っているときに、矢印を中央に配置する効果に遭遇しました。クリック領域を大きくし...

vue+antv でレーダーチャートを実装するためのサンプルコード

1. 依存関係をダウンロードするnpm インストール @antv/データセットnpm インストール ...