Giter Club home page Giter Club logo

sprint.redux's Introduction

Redux

This was created during my time as a Code Chrysalis Student

Redux について学ぶ時がきました。Redux は、アプリケーションの状態(state)を管理するのに役立つライブラリです。 実際には、React とともに Redux が使用され語られることが多いですが、今日は Node サーバーのみのアプリケーションの状態(state)を管理するために Redux を使用します。

はじめに

このリポジトリは巨大で、より複雑な RESTful API のベストプラクティスに基づいて作られています。複雑な処理を構築するためにファイルを分割し、それぞれができるだけ小さくなるように設計し、それぞれを組み合わせています。あなたの作業を少し楽にするために、コードベース全体に渡って、ヒントとなるコメントを書いておきました。このコードベースに redux を導入する際には、ホワイトボードを使って、1 つのリクエストの設計をいったんグラフ化してみることをお勧めします。

この演習も、とても自由度の高いものになっています。テストと設計はガイドラインとして機能しています。機能が予想通りに動作する限り、変更/削除しても構いません。

Butterfly CI

革新的な新しい CI サービスの作成に参加しましょう。タスクをすばやく設定して実行するために、それぞれのタスクがあなたとあなたのペアに割り振られました:

  • API の設計と設定 - 同僚 A はこれを引き受けました。
  • 大変なバックエンド作業をすべて行う - シニア開発者はこの種の作業が大好きなので、彼はそれを引き受けました。
  • アプリケーションの状態(state)を追跡し、変更する - このタスクがあなたに振られました。

REST リクエストを行う

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)を拡張する必要があります:

  • usersorganizations を追加しましょう。ユーザーはエンドポイントを介して登録でき、また、組織の一部として登録することができます。組織はプロジェクトを抱え、組織に属するユーザーのみがプロジェクトを表示できます。すてきなユーザー認証は必要ありません。リクエストに現在のユーザーを含めても構いません。 必要な新しいルートとエンドポイント、および状態(state)を変更する必要があるかどうかを考えてみましょう。

ナイトメアモード

なんてことでしょう、シニア開発者が休暇から帰りたくないと言い出しました!

  • 実際のビルドロジックを実装しましょう。
    • git プロジェクトをチェックアウトする。
    • ビルドコマンドを実行する。

sprint.redux's People

Contributors

kapakahicoder avatar mia-the-coding-cat avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.