コアポイント
ステートフルな近代的なアプリケーションの構築は、複雑なタスクです。状態が変わるにつれて、アプリケーションは予測不可能で維持が困難になります。これがReduxが登場する場所です。 Reduxは、状態を処理するための軽量ライブラリです。それを州のマシンと考えてください。
この記事では、給与加工エンジンを構築することにより、Reduxの状態容器を詳細に調べます。このアプリは、ボーナスやストックオプションなどのすべてのエキストラとともに給与計算を保存します。純粋なJavaScriptとTypeScriptを使用して、ソリューションをシンプルに保つためにタイプチェックします。 Reduxは非常に簡単にテストすることができるため、Jestを使用してアプリケーションを確認します。このチュートリアルでは、JavaScript、Node、およびNPMをある程度理解していると思います。
最初に、このアプリケーションをnpm：
で初期化できますテストコマンドを要求するときは、Jestを使用し続けます。これは、NPM Tが冗談を開始し、すべてのユニットテストを実行することを意味します。メインファイルはindex.jsです。 NPM Initの残りの質問に気軽に答えてください。
npm init
タイプチェックを行い、データモデルを決定するためにTypeScriptを使用します。これは、私たちが構築しようとしているものを概念化するのに役立ちます。
TypeScriptを始めるには：
開発ワークフローに依存関係のいくつかを開発します。これは、どの依存関係が開発者向けに準備され、どの依存関係が生産環境で使用されるかを明確に示しています。型タイプスクリプトの準備ができたら、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コマンドのみが必要であることに注意してください。
ここに、良い出発点とそれぞれのオプションが何を意味するかを示す合理的なコンパイラオプションがあります。
npm init
これにより、テストフレームワークがタイプスクリプトファイルをピックアップし、それらを変換する方法を知ることができます。素晴らしい機能は、ユニットテストを実行するときにタイプチェックを行うことができることです。このプロジェクトの準備を整えるには、index.test.tsファイルを含む__tests__フォルダーを作成します。次に、衛生チェックが行われます。たとえば、
npm i typescript --save-dev
npm startを実行し、npm tはエラーを引き起こしません。これにより、ソリューションの構築を開始できることがわかります。しかし、これを行う前に、プロジェクトにReduxを追加しましょう：
"start": "tsc && node .bin/index.js"
この依存関係は、生産環境で使用されます。したがって、-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
たとえば、
を実行する必要があります 各プロパティについて、TypeScriptはコロンを使用してタイプを指定することに注意してください。たとえば、番号。これにより、タイプ契約が決定され、タイプチェッカーに予測可能性が追加されます。明示的な型宣言を備えたタイプシステムを使用して、Reduxを強化できます。これは、Redux状態容器が予測可能な動作のために構築されているためです。 このアイデアは狂ったことでも急進的でもありません。 Reduxの学習第1章（SitePoint Premiumメンバーのみ）は、これをよく説明しています。 アプリケーションが変更されると、タイプチェックは追加の予測可能性を追加します。アプリケーションが拡大するにつれて、タイプ理論は、大規模なコードセグメントの再構築を簡素化するのにも役立ちます。 タイプの概念化エンジンを使用すると、次の操作機能の作成に役立ちます。
純粋な関数としてのレデューサー
タイプチェッカーは、これらがこのオブジェクトに属する正しい値であることを確認します。初期状態では、還元剤関数の作成を開始します： Redux Reducerには、すべての操作タイプがスイッチステートメントで処理されるパターンがあります。しかし、すべてのスイッチケースを繰り返す前に、再利用可能なローカル変数を作成します： グローバル状態を変更しない場合、ローカル変数を変更できることに注意してください。 Let Operatorを使用して、この変数が将来変更されることを伝えます。グローバルな状態（状態や運用パラメーターなど）を変更すると、レデューサーが不純になる可能性があります。この機能的なパラダイムは、還元剤機能を純粋に保つ必要があるため、重要です。初心者から忍者第11章までのJavaScript（SitePoint Premiumメンバーのみ）。
ES6 RESTオペレーターを使用して、州の財産を変更せずに保ちます。たとえば、...状態。残りのオペレーターの後に属性を新しいオブジェクトに上書きすることができます。ベースペイは解体から来ています。これは、他の言語でのパターンマッチングによく似ています。 ComputEToTalPay関数は次のように設定されています
金額はオプションであるため、障害を減らすためにデフォルト値があることを確認してください。タイプチェッカーがこのtrapを見つけて警告するので、これはタイプスクリプトの利点です。タイプシステムは特定の事実を知っているため、合理的な仮定を立てることができます。ボーナスに対処したいとします： このモードは、状態のみを維持するため、減速機を読みやすくします。操作の金額を取得し、合計給与を計算し、新しいオブジェクトテキストを作成します。ストックオプションを扱うときに違いはありません： 給料日に給与を処理するには、ボーナスと払い戻しを消去する必要があります。これらの2つの属性は、各給与の州に保持されていません。そして、給与履歴へのエントリを追加します。基本的な賃金とストックオプションは、頻繁に変更されないため、州に保管できます。それを念頭に置いて、これはPay_dayの処理方法です： newPayHistoryのような配列では、RESTの反意語である拡張オペレーターを使用します。コレクションオブジェクトの残りのプロパティとは異なり、プロジェクトを拡張します。たとえば、[... Payhistory]。 2つの演算子は似ていますが、同じではありません。これはインタビューの質問に表示される可能性があるため、注意してください。 PAPHISTORYにPOP（）を使用しても、状態は変わりません。なぜ？ Slice（）が新しい配列を返すためです。 JavaScriptの配列は参照によってコピーされます。新しい変数に配列を割り当てることは、基礎となるオブジェクトを変更しません。したがって、これらのタイプのオブジェクトを扱う際には注意が必要です。 lastPayHistoryは未定義の可能性が高いため、貧しい人のヌル値マージを使用してゼロに初期化します。 （o && o.property）||。 JavaScriptまたはTypeScriptの将来のバージョンでこれを行うためのよりエレガントな方法があるかもしれません。 各redux還元剤は、デフォルトのブランチを定義する必要があります。国家が未定義にならないようにするには： 純粋な機能を書くことの多くの利点の1つは、テストが簡単であることです。ユニットテストは、予測可能な動作を期待する必要があるテストであり、ビルドの一部としてすべてのテストを自動化できます。 __tests __/index.test.tsで、仮想テストをキャンセルして、関心のあるすべての機能をインポートします： すべての関数はエクスポートに設定されているため、インポートできます。基本給与については、給与計算エンジンの減少を開始してテストしてください。
従業員が稼いだお金が会社の株式を購入するのに十分なお金がない場合は、引き続き控除をスキップしてください。また、Stockoptionsをゼロにリセットしていることを確認してください： この修正は、彼らがNewStockoptionsに十分なお金を持っているかどうかを決定します。これにより、ユニットテストが渡され、コードは健全で意味のあるものです。控除をするのに十分なお金がある肯定的なユースケースをテストすることができます： 給料日の場合、複数のステータスを使用してテストし、1回限りのトランザクションが持続しないことを確認してください。
すべてのコンテンツを統合します
PayrollenGinereducerを使用して、Reduxストレージを開始します：
従業員が300を獲得し、50の払い戻し、100のボーナス、15が会社の株式を獲得したとします。
もっと楽しくするには、別の50の払い戻しを行い、別の給与を処理します： 最後に、別の給与を実行して、reduxストレージの登録を解除してください： 最終結果は次のとおりです
Reduxは、複雑な状態管理の問題に対する簡単なソリューションを提供します。機能的なパラダイムに依存して、予測不可能性を低下させます。還元剤は純粋な機能であるため、単体テストは非常に簡単です。 Jestを使用することにしましたが、基本的なアサーションをサポートするテストフレームワークは機能します。 TypeScriptは、タイプ理論を使用して、追加の保護層を追加します。タイプチェックを機能的なプログラミングと組み合わせると、ほとんど中断されることのない頑丈なコードが表示されます。最も重要なことは、TypeScriptが価値を追加している間、作業の邪魔にならないことです。気付いた場合、タイプ契約が整ったら、追加のエンコードはほとんどありません。タイプチェッカーは残りを行います。他の優れたツールと同様に、TypeScriptは目に見えないまま、エンコードの規律を自動化します。タイプスクリプトは大声でbarえますが、軽く噛みつきます。 以上がReduxに深く潜りますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
給与計算ステータスについては、基本給与、ボーナスなどの属性が必要です。また、このステータスを使用して給与履歴を維持します。 npm init
npm i typescript --save-dev
例："start": "tsc && node .bin/index.js"
{
"compilerOptions": {
"strict": true,
"lib": ["esnext", "dom"],
"outDir": ".bin",
"sourceMap": true
},
"files": [
"src/index"
]
}npm i jest ts-jest @types/jest @types/node --save-dev
"jest": {
"preset": "ts-jest"
}npm init
npm i typescript --save-dev
"start": "tsc && node .bin/index.js"
{
"compilerOptions": {
"strict": true,
"lib": ["esnext", "dom"],
"outDir": ".bin",
"sourceMap": true
},
"files": [
"src/index"
]
}npm i jest ts-jest @types/jest @types/node --save-dev
テスト還元剤関数
"jest": {
"preset": "ts-jest"
}it('is true', () => {
expect(true).toBe(true);
});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';
npm init
npm i typescript --save-dev
"start": "tsc && node .bin/index.js"
{
"compilerOptions": {
"strict": true,
"lib": ["esnext", "dom"],
"outDir": ".bin",
"sourceMap": true
},
"files": [
"src/index"
]
}npm i jest ts-jest @types/jest @types/node --save-dev
この時点で、Reduxがよりデザインパターンであるかどうか疑問に思うかもしれません。パターンと軽量ライブラリの両方であると答えたら、あなたは正しいです。 index.tsでは、reduxをインポート：
"jest": {
"preset": "ts-jest"
}it('is true', () => {
expect(true).toBe(true);
});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';
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;
}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});
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
