Reduxを始めましょう：なぜReduxなのか？

あなたが反応を学んでいるとき、あなたはほとんど常に人々がreduxがどれほど素晴らしいか、そしてあなたがそれを試してみるべきだと言うのを聞くでしょう。 React Ecosystemは迅速なペースで成長しており、Flow、Redux、Middlewares、Mobxなど、Reactに接続できるライブラリが非常に多くあります。

Learning Reactは簡単ですが、Reactエコシステム全体に慣れるには時間がかかります。このチュートリアルは、Reactエコシステムの不可欠なコンポーネントの1つであるReduxの紹介です。

基本的な非レッドルックス用語

以下は、よく知られていないかもしれない一般的に使用される用語のいくつかを紹介しますが、それらはRedux自体に固有ではありません。このセクションをスキムして、何かが意味をなさない場合//場合にここに戻ってくることができます。

純粋な機能

純粋な関数は、それが満たさなければならない2つの追加の制約を備えた通常の関数にすぎません。

1. 一連の入力が与えられた場合、関数は常に同じ出力を返す必要があります。
2. 副作用は発生しません。

たとえば、ここに2つの数値の合計を返す純粋な関数があります。

 / *純粋な追加関数 */<br> const add =（x、y）=> {<br> xyを返します。<br> }<br><br> console.log（add（2,3））// 5<br><br>

純粋な関数は予測可能な出力を与え、決定論的です。関数は、戻り値を計算する以外に実行すると不純になります。

たとえば、以下のADD関数はグローバル状態を使用して出力を計算します。さらに、この関数はコンソールに値を記録します。コンソールは副作用と見なされます。

 const y = 10;<br><br> const impureadd =（x）=> {<br> console.log（ `入力は$ {x}および$ {y}`）です。<br> xyを返します。<br> }<br>

観察可能な副作用

「観察可能な副作用」は、外の世界との機能によって行われた相互作用の派手な用語です。関数が、関数の外側に存在する変数に値を書き込もうとする場合、または外部メソッドを呼び出そうとする場合、これらのことを安全に副作用と呼ぶことができます。

ただし、純粋な関数が別の純粋な関数を呼び出す場合、関数は純粋なものとして扱うことができます。一般的な副作用のいくつかは次のとおりです。

• API呼び出しを行います
• コンソールまたは印刷データへのロギング
• 変異データ
• DOM操作
• 現在の時間を取得します

コンテナとプレゼンテーションコンポーネント

コンポーネントアーキテクチャを2つに分割することは、Reactアプリケーションを使用する際に役立ちます。それらを大幅に分類し、コンテナコンポーネントとプレゼンテーションコンポーネントの2つのカテゴリに分類できます。また、一般的にスマートコンポーネントとダムコンポーネントとして知られています。

コンテナコンポーネントは、物事の仕組みに関係していますが、プレゼンテーションコンポーネントは物事の見た目に関係しています。概念をよりよく理解するために、私はそれを別のチュートリアルで説明しました：コンテナとReactのプレゼンテーションコンポーネント。

可変性と不変のオブジェクト

可変オブジェクトは、次のように定義できます。

可変オブジェクトは、作成後に状態を変更できるオブジェクトです。

不変性は正反対です。不変のオブジェクトは、作成後に状態を変更できないオブジェクトです。 JavaScriptでは、文字列と数字は不可能ですが、オブジェクトと配列は不可能です。この例は、違いをよりよく示しています。

 / *文字列と数字は不変です */<br><br> a = 10としましょう。<br><br> b = aとします。<br><br> b = 3;<br><br> console.log（ `a = $ {a}およびb = $ {b}`）; // a = 10およびb = 3<br><br> / *しかし、オブジェクトと配列は */<br><br> / *オブジェクトから始めましょう */<br><br> let user = {<br> 名前：「ボブ」、<br> 年齢：22、<br> ジョブ：「なし」<br> }<br><br> active_user = user;<br><br> Active_user.name = "tim";<br><br> //両方のオブジェクトに同じ値があります<br>console.log（active_user）; // {"name"： "tim"、 "age"：22、 "job"： "none"}<br><br> console.log（user）; // {"name"： "tim"、 "age"：22、 "job"： "none"}<br><br> / *今すぐ配列のために */<br><br> let usersid = [1,2,3,4,5]<br><br> let usersiddup = usersid;<br><br> usersiddup.pop（）;<br><br> console.log（usersiddup）; // [1,2,3,4]<br> console.log（usersid）; // [1,2,3,4]<br>

オブジェクトを不変にするには、store.getState（）を使用して、アプリケーションの現在の状態ツリーにアクセスします。

store.subscribe（リスナー） - 州の変更を聞く。アクションが発送されるたびに呼び出されます。

店を作りましょう。 Reduxには、新しいストアを作成するconfigureStoreメソッドがあります。それが何であるかはわかりませんが、それを還元剤に渡す必要があります。したがって、Reducerという関数を作成するだけです。オプションで、ストアの初期状態を設定する2番目の引数を指定できます。

src/index.js

 「redux」から{configureStore}をインポートします。<br> //これは還元剤です<br>const reducer =（）=> {<br> / *何かがここに行く */<br> }<br><br> // initialStateはオプションです。<br> //このデモでは、カウンターを使用していますが、通常はオブジェクトです<br>const InitialState = 0<br> const store = configureStore（reducer、initialstate）;<br>

次に、ストアの変更を聴き、その後、ストアの現在の状態をconsole.log()聴きます。

 store.subscribe（（）=> {<br> console.log（ "Stateが変更された" store.getState（））;<br> }）<br>

では、どのようにストアを更新しますか？ Reduxには、これを実現するアクションと呼ばれるものがあります。

アクション/アクションクリエイター

アクションは、アプリケーションから情報をストアに送信する単純なJavaScriptオブジェクトでもあります。インクリメントボタンを備えた非常にシンプルなカウンターがある場合、それを押すと、次のようなアクションがトリガーされます。

 {<br> タイプ：「増分」、<br> ペイロード：1<br> }<br>

彼らは店の唯一の情報源です。店舗の状態は、アクションに応じてのみ変更されます。各アクションには、アクションオブジェクトが意図していることを説明するタイププロパティが必要です。それ以外は、アクションの構造は完全にあなた次第です。ただし、アクションは、アプリケーション状態を変換するために必要な最小の情報を表すため、アクションを小さく保ちます。

たとえば、上記の例では、タイププロパティは「増分」に設定されており、追加のペイロードプロパティが含まれています。ペイロードプロパティの名前をより意味のあるものに変更したり、私たちの場合は完全に省略したりすることができます。このようにアクションを店に派遣することができます。

 store.dispatch（{type： "increment"、ペイロード：1}）;<br>

Reduxのコーディング中、通常はアクションを直接使用することはありません。代わりに、アクションを返す関数を呼び出します。これらの関数は、アクションクリエイターとして一般的に知られています。以前に説明した増分アクションのアクション作成者は次のとおりです。

 const incrementCount =（count）=> {<br> 戻る {<br> タイプ：「増分」、<br> ペイロード：カウント<br> }<br> }<br>

したがって、カウンターの状態を更新するには、次のようなincrementCountアクションを派遣する必要があります。

 store.dispatch（incrementCount（1））;<br> store.dispatch（incrementCount（1））;<br> store.dispatch（incrementCount（1））;<br>

ブラウザコンソールに向かうと、部分的に機能していることがわかります。レデューサーをまだ定義していないため、未定義になります。

だから今、私たちは行動と店をカバーしています。ただし、アクションによって提供される情報を変換し、ストアの状態を変換するメカニズムが必要です。還元剤はこの目的に役立ちます。

還元剤

アクションは問題を説明し、レデューサーは問題を解決する責任があります。以前の例では、 incrementCountメソッドは、州に行ったかった変更の種類に関する情報を提供するアクションを返しました。還元剤は、この情報を使用して実際に状態を更新します。ドキュメントには、Reduxを使用している間は常に覚えておくべき大きなポイントがあります。

同じ引数を考えると、還元剤は次の状態を計算して返す必要があります。驚きはありません。副作用はありません。 API呼び出しはありません。突然変異はありません。単なる計算。

これが意味することは、還元剤が純粋な機能でなければならないということです。入力のセットが与えられた場合、常に同じ出力を返す必要があります。それを超えて、それ以上は何もするべきではありません。また、還元剤は、Ajax呼び出しを行い、APIからデータを取得するなど、副作用の場所ではありません。

カウンターのレデューサーを埋めましょう。

 //これは還元剤です<br><br>const reducer =（state = initialState、action）=> {<br> switch（action.type）{<br> ケース「増分」：<br> 状態action.payloadを返します<br> デフォルト：<br> 返品状態<br> }<br> }<br>

還元剤は、状態とアクションの2つの引数を受け入れ、新しい状態を返します。

 （前state、アクション）=> newState<br>

状態は、州の値が未定義である場合にのみ使用されるデフォルト値であるinitialStateを受け入れます。それ以外の場合、状態の実際の値が保持されます。スイッチステートメントを使用して、正しいアクションを選択します。ブラウザを更新すると、すべてが期待どおりに機能します。

DECREMENTのケースを追加しましょう。それなしではカウンターが不完全です。

 //これは還元剤です<br><br>const reducer =（state = initialState、action）=> {<br> switch（action.type）{<br> ケース「増分」：<br> 状態action.payloadを返します<br> ケース「DECREMENT」：<br> Return State -Action.PayLoad<br> デフォルト：<br> 返品状態<br> }<br> }<br>

これがアクションクリエーターです。

 const decromentCount =（count）=> {<br> 戻る {<br> タイプ：「DECREMENT」、<br> ペイロード：カウント<br> }<br> }<br>

最後に、それを店に派遣します。

 store.dispatch（incrementCount（4））; // 4<br> store.dispatch（decrementCount（2））; // 2<br>

それでおしまい！

まとめ

このチュートリアルは、Reduxを使用して状態を管理するための出発点となることを意図していました。ストア、アクション、リデューサーなどの基本的なReduxの概念を理解するために必要なすべてのものをカバーしました。チュートリアルの終わりに向かって、作業Reduxデモカウンターも作成しました。それほどではありませんでしたが、パズルのすべてのピースがどのように合うかを学びました。

過去数年にわたって、Reactは人気が高まっています。実際、市場には、購入、レビュー、実装などが可能な多くのアイテムがあります。 Reactの周りに追加のリソースを探している場合は、遠慮なくチェックアウトしてください。

次のチュートリアルでは、Reduxを使用してReactアプリケーションを作成するためにここで学んだことを利用します。それまでお楽しみに。コメントであなたの考えを共有してください。

以上がReduxを始めましょう：なぜReduxなのか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。