This was created during my time as a Code Chrysalis Student
Redux について学ぶ時がきました。Redux は、アプリケーションの状態(state)を管理するのに役立つライブラリです。 実際には、React とともに Redux が使用され語られることが多いですが、今日は Node サーバーのみのアプリケーションの状態(state)を管理するために Redux を使用します。
このリポジトリは巨大で、より複雑な RESTful API のベストプラクティスに基づいて作られています。複雑な処理を構築するためにファイルを分割し、それぞれができるだけ小さくなるように設計し、それぞれを組み合わせています。あなたの作業を少し楽にするために、コードベース全体に渡って、ヒントとなるコメントを書いておきました。このコードベースに redux を導入する際には、ホワイトボードを使って、1 つのリクエストの設計をいったんグラフ化してみることをお勧めします。
この演習も、とても自由度の高いものになっています。テストと設計はガイドラインとして機能しています。機能が予想通りに動作する限り、変更/削除しても構いません。
革新的な新しい CI サービスの作成に参加しましょう。タスクをすばやく設定して実行するために、それぞれのタスクがあなたとあなたのペアに割り振られました:
- API の設計と設定 - 同僚 A はこれを引き受けました。
- 大変なバックエンド作業をすべて行う - シニア開発者はこの種の作業が大好きなので、彼はそれを引き受けました。
- アプリケーションの状態(state)を追跡し、変更する - このタスクがあなたに振られました。
Insomnia は、API に REST クエリを送信できるクロスプラットフォーム対応の強力なアプリであり、これを使用して API をテストすることもできます。または、POSTMan を使用することもできます。
Production モードでサーバーを起動するには、以下のコマンドを実行します:
yarn start
ホットリローディングのできる Development モードを起動するには、以下のコマンドを実行します:
yarn dev
lint チェックを行うには、以下のコマンドを実行します:
yarn lint
reducers/actions に対して mocha のテストを行うには、以下のコマンドを実行します:
yarn test:mocha
サーバーのシミュレーションを使用し実行するには、以下のコマンドを実行します(基本的に結合テスト用):
yarn test:simulate
シミュレーション、mocha のテストと lint チェックをそれぞれ実行するには、以下のコマンドを実行します:
yarn test
デバッグをサポートするために、すぐに使用できるデバッグ設定を見つけられると思います。サーバーとシミュレーションを同時に起動およびデバッグします。
最初のバージョンには、2 つの主要コンポーネント(プロジェクトとビルド)があります。
プロジェクトには、ソースコードを取得する場所とソフトウェアプロジェクトのテストを実行する方法に関する情報、および追加のメタ情報が含まれています。JSON で表した場合のプロジェクト例は以下のとおりです:
{
"id": "hykjdLm", // shortid で生成された文字列を使用しますが、別のデータ型を自由に使用することもできます
"name": "vscode",
"url": "[email protected]:Microsoft/vscode.git",
"buildCommand": "yarn && yarn test",
"language": "JavaScript"
}
また、サービスはプロジェクトのビルドを追跡します。ビルドは次の形式を取ります:
{
"buildNumber": 65481, // プロジェクト内のビルドごとにインクリメントされる連番
"status": "Failed", // "Pending" | "Running" | "Success" | "Failed" のうちの 1 つ。
"output": "48 out of 13325 Tests failed."
}
状態(state)とファイルの構成は自分で自由に決めても構いません。
あなたに課す唯一の制限は、状態(state)を管理するために redux
を使用しなければならないということです。
ストア(Store)をセットアップし、Actions と Reducers を定義して使用します。
注意: このリポジトリのテストは、特定の Redux の構成をテストするように設計されています。今回、Redux の形式や構成を自由に決定できるため、今回用意されているテストは必要要件ではなく、ガイドラインとして機能すると考えてください。
役に立つ追加のパッケージを自由にインストールして使用しても構いません。一部はすでにインストールされています。shortid
は、プロジェクトの ID として使用できる短い一意の文字列を生成します。数字を使用することもできます。あなたの自由です。また、dependencies に underscore
がリストアップされています。その機能の多くは LoScore
の演習で再現・実装したことがあるはずなので、そのインターフェースには馴染みがあるはずです!
コード全体にわたって、役立つコメントが記述されており、コメント箇所はグローバルな状態(state)にアクセスするか変更する必要がある箇所になります。
TODO
を検索すると、すべてのコメント箇所が見つかるはずです。各コメントには、そこにあるデータで何を行えばよいのか短い説明が記述されています。
- redux を追加しましょう -- redux を配置する場所を選択してください。現在はどこにも配置されていないので、好きな構成を自由に作成できます。すべての関連ファイルを配置する redux フォルダーを作成することをお勧めしますが、redux を含む単一のファイルだけを作成しても構いません。どのタイミングでストア(store)を初期化するかは、あまり気にする必要はありません(ただし、ストア(store)を初期化するために、メインの index.js または butterfly.js 内で redux のファイルをインポートしないでください)。それらとは異なる場所でストア(store)を初期化し、必要な場所から使用します。
- 自身の状態(state)を表す適切な構成をデザインしましょう - 他のタスクをこなすときに、より簡単な実装方法を見つけた場合、何回も問題にアプローチしたり改善したりすること恐れないでください。
- ストア(store)、Actions、Reducers をセットアップしましょう。
- すべての
TODO
コメントを確認し、適切な処理を実装しましょう。 -
TODO
のうち API に関しては、正しい結果もレスポンスとして返す必要があります。現在の実装では、常に 418 エラーを返しています。 - シミュレーションに合格しましょう! シミュレーションを起動するために、
yarn test:simulate
を実行しましょう。 - Actions と Reducers のテストを作成しましょう。それらのテストを
src/__tests__
フォルダに入れてください。
あなたの作成した CI が動き始めます!!トラフィックの渋滞に見舞われます!残念ながら、サーバーはトラフィックをうまく処理できず、頻繁にクラッシュします。 これは、これまでのすべてのデータがなくなったことを意味します!なんてことでしょう!
- 状態(state)を保持し、サーバーの起動時に状態(state)をロードできるようにしましょう(これをどのように行うかは、あなた次第です)。
おめでとうございます! あなたの MVP は成功し、企業もこの CI を採用したいと考えています。 企業のニーズを満たすために、API と状態(state)を拡張する必要があります:
-
users
とorganizations
を追加しましょう。ユーザーはエンドポイントを介して登録でき、また、組織の一部として登録することができます。組織はプロジェクトを抱え、組織に属するユーザーのみがプロジェクトを表示できます。すてきなユーザー認証は必要ありません。リクエストに現在のユーザーを含めても構いません。 必要な新しいルートとエンドポイント、および状態(state)を変更する必要があるかどうかを考えてみましょう。
なんてことでしょう、シニア開発者が休暇から帰りたくないと言い出しました!
- 実際のビルドロジックを実装しましょう。
- git プロジェクトをチェックアウトする。
- ビルドコマンドを実行する。