コアポイント

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

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

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

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

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

で初期化できます

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

npm init

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

TypeScriptを始めるには

：

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

npm i typescript --save-dev

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

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

次の構(gòu)成でtsconfig.jsonファイルを作成します

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

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

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

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

npm init

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

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

npm i typescript --save-dev

npm startを?qū)g行し、npm tはエラーを引き起こしません。これにより、ソリューションの構(gòu)築を開始できることがわかります。しかし、これを行う前に、プロジェクトに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の操作タイプを使用して、給料日のチェックを発行し、給與履歴を追跡できます。これらのタイプの操作は、給與エンジンを完璧にするため、殘りのデザインを?qū)Г蓼?。彼らは、基本賃金額の設(shè)定など、州のライフサイクルでイベントをキャプチャします。これらのアクションイベントは、クリックイベントであろうとデータの更新であろうと、任意のコンテンツに添付できます。 Redux操作の種類は、スケジューリングがどこから來るのかを抽象化しています。ステータスコンテナは、クライアントおよび/またはサーバーで実行できます。

typeScript

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

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

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

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

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

を?qū)g行する必要があります

npm init

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

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

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

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

npm i typescript --save-dev

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

純粋な関數(shù)としてのレデューサー

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

例：

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

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

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

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

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

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

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

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

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

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

npm init

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

npm i typescript --save-dev

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

"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つの演算子は似ていますが、同じではありません。これはインタビューの質(zhì)問に表示される可能性があるため、注意してください。

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

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

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

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

テスト還元?jiǎng)堥v數(shù)

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

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

すべての関數(shù)はエクスポートに設(shè)定されているため、インポートできます。基本給與については、給與計(jì)算エンジンの減少を開始してテストしてください。

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

Reduxは、初期狀態(tài)を未定義に設(shè)定します。したがって、還元?jiǎng)堥v數(shù)にデフォルト値を提供することを常にお?jiǎng)幛幛筏蓼?。払い戻しを処理するのはどうですか？

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è)員からお金を受けたくありません。このテストを?qū)g行する場合は、Stockoptionsが差し引かれるため、TotalPayは-10に設(shè)定されていることに注意してください。これがコードをテストする理由です！合計(jì)給與が計(jì)算される場所を修正しましょう。

npm init

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

npm i typescript --save-dev

この修正は、彼らがNewStockoptionsに十分なお金を持っているかどうかを決定します。これにより、ユニットテストが渡され、コードは健全で意味のあるものです?？爻颏工毪韦耸证胜黏ⅳ肟隙ǖ膜圣姗`スケースをテストすることができます：

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

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

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

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

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

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

Reduxは、最初にinit_actionのような操作タイプを設(shè)定します。還元?jiǎng)垽顺跗跔顟B(tài)セットがあるかどうかのみが関心があります。

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

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

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

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

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

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

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

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

npm i redux --save

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

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

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

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

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

最終結(jié)果は次のとおりです

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)データの真のソースであるものです。これらはすべて、健全な機(jī)能パラダイムなどのコーディングベストプラクティスを採用しています。

結(jié)論

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)管理の問題に対する簡単なソリューションを提供します。機(jī)能的なパラダイムに依存して、予測不可能性を低下させます。還元?jiǎng)垽霞兓偆蕶C(jī)能であるため、単體テストは非常に簡単です。 Jestを使用することにしましたが、基本的なアサーションをサポートするテストフレームワークは機(jī)能します。

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

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

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