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 の統一管理を容易にするためのものです。対応するアクション オブジェクトを作成すると、コードをモジュール化するのに役立ちます。 エクスポート 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を設定しましょう。 ここで逆の順序で語るのは意味がないので、必要ありません。 ストアの世界的な利用状況の初見 '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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: 自作の Windows サーバーに egg アプリケーションを展開する方法 (画像とテキスト付き)
>>: Windows サーバー ポートを開きます (例としてポート 8080 を使用します)
目次1. Nginxは負荷分散の原則を実装する2. Nginxの動的および静的分離の原則Nginx ...
目次Node.jsとはNodeJSをインストールするNode を使用して Hello World を...
前書き: 最近、私はパートナーとチームを組んで .NET Core プロジェクトに取り組む予定です。...
MySQL 8.0.18 では、インデックスが作成されていないフィールドに適用でき、等価値の関連付け...
機能シナリオを簡単に説明しましょう。データ行フィールドは次のとおりです。名前開始日時タイプこの表では...
目次ステップ1: プロジェクトをインストールするディレクトリにnode_modulesをインストール...
JD カルーセルは、動的な効果を追加せず、主に位置決めの知識を使用して、純粋な HTML と CS...
HTML のインライン要素とブロックレベル要素の違い:標準的なドキュメント フローでは、ブロック ...
序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...
例示するDML(データ操作言語)とは、データベースの追加、削除、変更を行うための操作命令のことです。...
PSD から div css へのウェブページ切り取り例ステップ 1: まず、すべてのタグの内側と外...
この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...
この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...
スペースを購入してウェブサイトを構築したことがある友人なら、ウェブサイトは正式に開設する前に登録する...
1. 理由新しいシステムに MySQL を再インストールする必要があったので、将来詳細を忘れた場合...