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 を使用します)

推薦する

Nginx の負荷分散と動的および静的分離の原理と構成

目次1. Nginxは負荷分散の原則を実装する2. Nginxの動的および静的分離の原則Nginx ...

NODE.JS を使用して WEBSERVER を作成する手順

目次Node.jsとはNodeJSをインストールするNode を使用して Hello World を...

Linux での MySQL 5.7 の導入とリモート アクセス構成

前書き: 最近、私はパートナーとチームを組んで .NET Core プロジェクトに取り組む予定です。...

MySQL 8.0.18 ハッシュ結合は左/右結合をサポートしていません 左と右の結合の問題

MySQL 8.0.18 では、インデックスが作成されていないフィールドに適用でき、等価値の関連付け...

MySQL の自己結合重複排除に関する注意事項

機能シナリオを簡単に説明しましょう。データ行フィールドは次のとおりです。名前開始日時タイプこの表では...

node_modulesを削除して再インストールする方法

目次ステップ1: プロジェクトをインストールするディレクトリにnode_modulesをインストール...

JDカルーセル効果を実現するための純粋なHTMLとCSS

JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...

Web 開発の面接と筆記試験に必須の知識(必読)

HTML のインライン要素とブロックレベル要素の違い:標準的なドキュメント フローでは、ブロック ...

nginx 設定チュートリアルにおける add_header の落とし穴の詳細な説明

序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...

MySQL データ操作 - DML ステートメントの使用

例示するDML(データ操作言語)とは、データベースの追加、削除、変更を行うための操作命令のことです。...

psdカット画像をdiv+css形式に変換する

PSD から div css へのウェブページ切り取り例ステップ 1: まず、すべてのタグの内側と外...

MySQL 条件付きクエリと使用法および優先順位の例の分析

この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...

テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加によく使用される MySQL の SQL 文の概要

この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...

初心者のための入門チュートリアル⑤:ウェブサイト登録はとても簡単、簡単な登録のヒント

スペースを購入してウェブサイトを構築したことがある友人なら、ウェブサイトは正式に開設する前に登録する...

MySQL Installer 8.0.21 インストール チュートリアル (画像とテキスト付き)

1. 理由新しいシステムに MySQL を再インストールする必要があったので、将来詳細を忘れた場合...