コアポイント

• Reduxは、予測可能な狀態(tài)容器として機能することにより、最新のアプリケーションの狀態(tài)管理を簡素化します。これは、アプリケーションがスケーリングされたときに安定性を維持するために重要です。
• タイプスクリプトの統(tǒng)合は、タイプの安全性を強制することによりReduxを強化します。これにより、予測可能性の層が追加され、リファクタリングを簡素化することで大きなコードベースを維持できます。
• reduxの還元剤は、副作用がないことを保証するための純粋な機能として設計されており、それによって國家管理のテスト可能性と信頼性が向上します。
• Jestを使用してユニットテストを簡素化し、JestはTypeScriptでシームレスに動作し、Reduxアクションと還元剤をテストし、すべてのコンポーネントが期待どおりに機能するようにします。
• この記事では、給與計算エンジンを構築することにより、Reduxの実際の実裝を示しており、Reduxが実際のアプリケーションシナリオで狀態(tài)の遷移と副作用を扱う方法を示しています。

ステートフルな近代的なアプリケーションの構築は、複雑なタスクです。狀態(tài)が変わるにつれて、アプリケーションは予測不可能で維持が困難になります。これがReduxが登場する場所です。 Reduxは、狀態(tài)を処理するための軽量ライブラリです。それを州のマシンと考えてください。

この記事では、給與加工エンジンを構築することにより、Reduxの狀態(tài)容器を詳細に調べます。このアプリは、ボーナスやストックオプションなどのすべてのエキストラとともに給與計算を保存します。純粋なJavaScriptとTypeScriptを使用して、ソリューションをシンプルに保つためにタイプチェックします。 Reduxは非常に簡単にテストすることができるため、Jestを使用してアプリケーションを確認します。

このチュートリアルでは、JavaScript、Node、およびNPMをある程度理解していると思います。

最初に、このアプリケーションをnpm：

で初期化できます

テストコマンドを要求するときは、Jestを使用し続けます。これは、NPM Tが冗談を開始し、すべてのユニットテストを実行することを意味します。メインファイルはindex.jsです。 NPM Initの殘りの質問に気軽に答えてください。

npm init

タイプチェックを行い、データモデルを決定するためにTypeScriptを使用します。これは、私たちが構築しようとしているものを概念化するのに役立ちます。

TypeScriptを始めるには

：

開発ワークフローに依存関係のいくつかを開発します。これは、どの依存関係が開発者向けに準備され、どの依存関係が生産環(huán)境で使用されるかを明確に示しています。型タイプスクリプトの準備ができたら、package.jsonに起動スクリプトを追加：

npm i typescript --save-dev

SRCフォルダーの下にindex.tsファイルを作成します。これにより、ソースファイルがプロジェクトの殘りの部分から分離されます。 NPMを開始すると、ソリューションは実行されません。これは、TypeScriptを構成する必要があるためです。

"start": "tsc && node .bin/index.js"

次の構成でtsconfig.jsonファイルを作成します

この構成をTSCコマンドライン引數に配置できました。たとえば、TSC SRC/INDEX.TS - STRICT ....しかし、これらすべてを別のファイルに入れることははるかに明確です。 package.jsonの起動スクリプトには、TSCコマンドのみが必要であることに注意してください。

ここに、良い出発點とそれぞれのオプションが何を意味するかを示す合理的なコンパイラオプションがあります。

Strict：すべての厳密なタイプのチェックオプション、つまり-noimplicitany、 - strictnullchecksなどを有効にします。
lib：コンパイルされたライブラリファイルのリスト。
Outdir：出力をこのディレクトリにリダイレクトします。
SourceMap：デバッグ用のソースマップファイルを生成します。
ファイル：コンパイラに提供される入力ファイル。

ユニットテストに冗談を言うので、それを追加し続けます：

npm init

ts-jest依存関係テストフレームワークのタイプチェックを追加します。注意すべきことの1つは、package.jsonにJest構成を追加することです。

これにより、テストフレームワークがタイプスクリプトファイルをピックアップし、それらを変換する方法を知ることができます。素晴らしい機能は、ユニットテストを実行するときにタイプチェックを行うことができることです。このプロジェクトの準備を整えるには、index.test.tsファイルを含む__tests__フォルダーを作成します。次に、衛(wèi)生チェックが行われます。たとえば、

npm i typescript --save-dev

npm startを実行し、npm tはエラーを引き起こしません。これにより、ソリューションの構築を開始できることがわかります。しかし、これを行う前に、プロジェクトにReduxを追加しましょう：

"start": "tsc && node .bin/index.js"

この依存関係は、生産環(huán)境で使用されます。したがって、-save-devにそれを含める必要はありません。 Package.jsonをチェックすると、依存関係があります。

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

実際の操作でのペイストップエンジン

給與エンジンには、賃金、払い戻し、ボーナス、ストックオプションが含まれます。 Reduxでは、ステータスを直接更新することはできません。代わりに、新しい変更をストレージに通知するためにアクションがスケジュールされています。

したがって、これにより、次の操作タイプが殘ります

Pay_dayの操作タイプを使用して、給料日のチェックを発行し、給與履歴を追跡できます。これらのタイプの操作は、給與エンジンを完璧にするため、殘りのデザインを導きます。彼らは、基本賃金額の設定など、州のライフサイクルでイベントをキャプチャします。これらのアクションイベントは、クリックイベントであろうとデータの更新であろうと、任意のコンテンツに添付できます。 Redux操作の種類は、スケジューリングがどこから來るのかを抽象化しています。ステータスコンテナは、クライアントおよび/またはサーバーで実行できます。

typeScript

npm i jest ts-jest @types/jest @types/node --save-dev

型理論を使用して、狀態(tài)データに基づいてデータモデルを決定します。操作タイプやオプションの量など、各給與操作について。 Pay_dayは給與を処理するために資金を必要としないため、金額はオプションです。つまり、顧客に請求できますが、今のところは無視できます（おそらく第2版で紹介されます）。

たとえば、に置いてください

給與計算ステータスについては、基本給與、ボーナスなどの屬性が必要です。また、このステータスを使用して給與履歴を維持します。

この型タイプスクリプトインターフェイスは、

を実行する必要があります

npm init

各プロパティについて、TypeScriptはコロンを使用してタイプを指定することに注意してください。たとえば、番號。これにより、タイプ契約が決定され、タイプチェッカーに予測可能性が追加されます。明示的な型宣言を備えたタイプシステムを使用して、Reduxを強化できます。これは、Redux狀態(tài)容器が予測可能な動作のために構築されているためです。

このアイデアは狂ったことでも急進的でもありません。 Reduxの學習第1章（SitePoint Premiumメンバーのみ）は、これをよく説明しています。

アプリケーションが変更されると、タイプチェックは追加の予測可能性を追加します。アプリケーションが拡大するにつれて、タイプ理論は、大規(guī)模なコードセグメントの再構築を簡素化するのにも役立ちます。

タイプの概念化エンジンを使用すると、次の操作機能の作成に役立ちます。

npm i typescript --save-dev

良いことは、ProcessBasepay（ 'ABC'）を実行しようとすると、タイプチェッカーが警告することです。タイプの契約を破壊すると、狀態(tài)容器の予測可能性が低下します。給與計算型のような単一の操作契約を使用して、給與計算プロセッサをより予測可能にします。その量は、ES6屬性の略語を介して操作オブジェクトに設定されていることに注意してください。より伝統(tǒng)的なアプローチは量です。量であり、これはより冗長です。 （）=＆gt;などの矢印関數は、オブジェクトリテラルを返す機能を記述する簡潔な方法です。

純粋な関數としてのレデューサー

還元剤関數には、狀態(tài)と操作パラメーターが必要です。狀態(tài)には、デフォルト値の初期狀態(tài)が必要です。それで、あなたは私たちの最初の狀態(tài)がどのように見えるか想像できますか？空の給與履歴リストからゼロから始める必要があると思います。

例：

タイプチェッカーは、これらがこのオブジェクトに屬する正しい値であることを確認します。初期狀態(tài)では、還元剤関數の作成を開始します：

"start": "tsc && node .bin/index.js"

Redux Reducerには、すべての操作タイプがスイッチステートメントで処理されるパターンがあります。しかし、すべてのスイッチケースを繰り返す前に、再利用可能なローカル変數を作成します：

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

グローバル狀態(tài)を変更しない場合、ローカル変數を変更できることに注意してください。 Let Operatorを使用して、この変數が將來変更されることを伝えます。グローバルな狀態(tài)（狀態(tài)や運用パラメーターなど）を変更すると、レデューサーが不純になる可能性があります。この機能的なパラダイムは、還元剤機能を純粋に保つ必要があるため、重要です。初心者から忍者第11章までのJavaScript（SitePoint Premiumメンバーのみ）。

npm i jest ts-jest @types/jest @types/node --save-dev

最初のユースケースを処理するために、減速機のスイッチステートメントを開始してください：

ES6 RESTオペレーターを使用して、州の財産を変更せずに保ちます。たとえば、...狀態(tài)。殘りのオペレーターの後に屬性を新しいオブジェクトに上書きすることができます。ベースペイは解體から來ています。これは、他の言語でのパターンマッチングによく似ています。 ComputEToTalPay関數は次のように設定されています

"jest": {
  "preset": "ts-jest"
}

會社の株式を購入するためにお金が使用されるため、Stockoptionsを控除することに注意してください。払い戻しに対処したいとします：

npm init

金額はオプションであるため、障害を減らすためにデフォルト値があることを確認してください。タイプチェッカーがこのtrapを見つけて警告するので、これはタイプスクリプトの利點です。タイプシステムは特定の事実を知っているため、合理的な仮定を立てることができます。ボーナスに対処したいとします：

npm i typescript --save-dev

このモードは、狀態(tài)のみを維持するため、減速機を読みやすくします。操作の金額を取得し、合計給與を計算し、新しいオブジェクトテキストを作成します。ストックオプションを扱うときに違いはありません：

"start": "tsc && node .bin/index.js"

給料日に給與を処理するには、ボーナスと払い戻しを消去する必要があります。これらの2つの屬性は、各給與の州に保持されていません。そして、給與履歴へのエントリを追加します?；镜膜寿U金とストックオプションは、頻繁に変更されないため、州に保管できます。それを念頭に置いて、これはPay_dayの処理方法です：

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

newPayHistoryのような配列では、RESTの反意語である拡張オペレーターを使用します。コレクションオブジェクトの殘りのプロパティとは異なり、プロジェクトを拡張します。たとえば、[... Payhistory]。 2つの演算子は似ていますが、同じではありません。これはインタビューの質問に表示される可能性があるため、注意してください。

PAPHISTORYにPOP（）を使用しても、狀態(tài)は変わりません。なぜ？ Slice（）が新しい配列を返すためです。 JavaScriptの配列は參照によってコピーされます。新しい変數に配列を割り當てることは、基礎となるオブジェクトを変更しません。したがって、これらのタイプのオブジェクトを扱う際には注意が必要です。

lastPayHistoryは未定義の可能性が高いため、貧しい人のヌル値マージを使用してゼロに初期化します。 （o && o.property）||。 JavaScriptまたはTypeScriptの將來のバージョンでこれを行うためのよりエレガントな方法があるかもしれません。

各redux還元剤は、デフォルトのブランチを定義する必要があります。國家が未定義にならないようにするには：

npm i jest ts-jest @types/jest @types/node --save-dev

テスト還元剤関數

純粋な機能を書くことの多くの利點の1つは、テストが簡単であることです。ユニットテストは、予測可能な動作を期待する必要があるテストであり、ビルドの一部としてすべてのテストを自動化できます。 __tests __/index.test.tsで、仮想テストをキャンセルして、関心のあるすべての機能をインポートします：

"jest": {
  "preset": "ts-jest"
}

すべての関數はエクスポートに設定されているため、インポートできます?；窘o與については、給與計算エンジンの減少を開始してテストしてください。

it('is true', () => {
  expect(true).toBe(true);
});

Reduxは、初期狀態(tài)を未定義に設定します。したがって、還元剤関數にデフォルト値を提供することを常にお勧めします。払い戻しを処理するのはどうですか？

npm i redux --save

ハンドリングボーナスのパターンはこれと同じです：

ストックオプションの場合：

const BASE_PAY = 'BASE_PAY';
const REIMBURSEMENT = 'REIMBURSEMENT';
const BONUS = 'BONUS';
const STOCK_OPTIONS = 'STOCK_OPTIONS';
const PAY_DAY = 'PAY_DAY';

stockoptionsがTotalPayよりも大きい場合、TotalPayは変更されないままでなければならないことに注意してください。この仮想企業(yè)は倫理的であるため、従業(yè)員からお金を受けたくありません。このテストを実行する場合は、Stockoptionsが差し引かれるため、TotalPayは-10に設定されていることに注意してください。これがコードをテストする理由です！合計給與が計算される場所を修正しましょう。

npm init

従業(yè)員が稼いだお金が會社の株式を購入するのに十分なお金がない場合は、引き続き控除をスキップしてください。また、Stockoptionsをゼロにリセットしていることを確認してください：

npm i typescript --save-dev

この修正は、彼らがNewStockoptionsに十分なお金を持っているかどうかを決定します。これにより、ユニットテストが渡され、コードは健全で意味のあるものです。控除をするのに十分なお金がある肯定的なユースケースをテストすることができます：

"start": "tsc && node .bin/index.js"

給料日の場合、複數のステータスを使用してテストし、1回限りのトランザクションが持続しないことを確認してください。

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

ボーナスを確認するために古いステートを調整し、払い戻しをゼロにリセットする方法に注意してください。

reducerのデフォルトのブランチはどうですか？

npm i jest ts-jest @types/jest @types/node --save-dev

Reduxは、最初にinit_actionのような操作タイプを設定します。還元剤に初期狀態(tài)セットがあるかどうかのみが関心があります。

すべてのコンテンツを統(tǒng)合します

この時點で、Reduxがよりデザインパターンであるかどうか疑問に思うかもしれません。パターンと軽量ライブラリの両方であると答えたら、あなたは正しいです。 index.tsでは、reduxをインポート：

次のコードの例は、この聲明の場合にラップできます。これはストップガップなので、ユニットテストは統(tǒng)合テストに漏れません：

"jest": {
  "preset": "ts-jest"
}

実際のプロジェクトでこれを行うことはお勧めしません。モジュールを別々のファイルに配置して、コンポーネントを分離できます。これにより、読みやすくなり、問題が漏れません。ユニットテストは、モジュールが獨立して実行されるという事実からも恩恵を受けます。

it('is true', () => {
  expect(true).toBe(true);
});

PayrollenGinereducerを使用して、Reduxストレージを開始します：

各store.subscribe（）は、クリーニングに使用できる後続のunsubscribe（）関數を返します。ストレージを通じてスケジュールされたときにコールバックを登録しません。ここでは、store.getState（）を使用して、現(xiàn)在の狀態(tài)をコンソールに出力します。

npm i redux --save

従業(yè)員が300を獲得し、50の払い戻し、100のボーナス、15が會社の株式を獲得したとします。

もっと楽しくするには、別の50の払い戻しを行い、別の給與を処理します：

const BASE_PAY = 'BASE_PAY';
const REIMBURSEMENT = 'REIMBURSEMENT';
const BONUS = 'BONUS';
const STOCK_OPTIONS = 'STOCK_OPTIONS';
const PAY_DAY = 'PAY_DAY';

最後に、別の給與を実行して、reduxストレージの登録を解除してください：

interface PayrollAction {
  type: string;
  amount?: number;
}

最終結果は次のとおりです

interface PayStubState {
  basePay: number;
  reimbursement: number;
  bonus: number;
  stockOptions: number;
  totalPay: number;
  payHistory: Array<PayHistoryState>;
}

interface PayHistoryState {
  totalPay: number;
  totalCompensation: number;
}

示されているように、Reduxは狀態(tài)を維持し、狀態(tài)を変更し、きちんとした小さなパッケージで加入者に通知します。 Reduxを州のマシンと考えてください。これは、狀態(tài)データの真のソースであるものです。これらはすべて、健全な機能パラダイムなどのコーディングベストプラクティスを採用しています。

結論

export const processBasePay = (amount: number): PayrollAction =>
  ({type: BASE_PAY, amount});
export const processReimbursement = (amount: number): PayrollAction =>
  ({type: REIMBURSEMENT, amount});
export const processBonus = (amount: number): PayrollAction =>
  ({type: BONUS, amount});
export const processStockOptions = (amount: number): PayrollAction =>
  ({type: STOCK_OPTIONS, amount});
export const processPayDay = (): PayrollAction =>
  ({type: PAY_DAY});

Reduxは、複雑な狀態(tài)管理の問題に対する簡単なソリューションを提供します。機能的なパラダイムに依存して、予測不可能性を低下させます。還元剤は純粋な機能であるため、単體テストは非常に簡単です。 Jestを使用することにしましたが、基本的なアサーションをサポートするテストフレームワークは機能します。

TypeScriptは、タイプ理論を使用して、追加の保護層を追加します。タイプチェックを機能的なプログラミングと組み合わせると、ほとんど中斷されることのない頑丈なコードが表示されます。最も重要なことは、TypeScriptが価値を追加している間、作業(yè)の邪魔にならないことです。気付いた場合、タイプ契約が整ったら、追加のエンコードはほとんどありません。タイプチェッカーは殘りを行います。他の優(yōu)れたツールと同様に、TypeScriptは目に見えないまま、エンコードの規(guī)律を自動化します。タイプスクリプトは大聲でbarえますが、軽く噛みつきます。

このプロジェクトを試してみたい場合（これを願っています）、GitHubでこの記事のソースコードを見つけることができます。

以上がReduxに深く潛りますの詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。