Reduxでのサーバーサイド作業のためのmswのインストール

過去のレッスンで、私たちのアプリケーションにいくつかの追加の変更を加えました。 これから、アプリケーションがデータをやり取りするサーバーについて理解する必要があります。

実際のサーバーは持っていないので、優れたツールであるMock Service Workerを使って、その動作をシミュレートします。 Mock Service Worker (MSW) は、APIを模倣するためのツールで、ネットワークレベルでリクエストをインターセプトするために設計された標準化されたService Worker APIを使用します。MSWは、私たちのリクエスト (requests) に対して模擬的な応答 (responses) を生成します。 しかも、開発者によれば、このツールは非常に効率的で柔軟性があり、モック（そのためにアプリケーションで特別に何かを作成する必要はありません）を使用したデバッグの後、アプリケーションを既に本物の外部サーバーと一緒に運用開始できます。 そのドキュメントは非常に広範で、もしMSWに興味があれば、公式サイトで読むことができます。

では、mswのインストールに移りましょう。 そのために、プロダクトのプロジェクトを開き、ターミナルで以下のコマンドを入力します：

terminalnpm install msw --save-dev

mswを動作させるためには、mockServiceWorker.jsを作成し、何らかの公開ディレクトリにコピーする必要もあります。 多くの場合、それはpublicフォルダです。空のpublicフォルダがあるので、そこにコピーしましょう。 そのためには、ターミナルで以下のコマンドを実行し、その後publicの使用に同意します：

terminalnpx msw init public

では、publicを確認してみましょう。生成されたスクリプトmockServiceWorker.jsがそこにできているはずです。 次に、プロダクトのアプリケーションを起動し、ブラウザのアドレスバーにhttp://localhost:5173/mockServiceWorker.jsと入力します （私たちのアプリケーションは5173ポートで動作しているため）。 ブラウザのウィンドウにファイルmockServiceWorker.jsの内容が表示されましたか？ それなら全て順調です、次に進みましょう。

次に、srcフォルダ内にapiフォルダを作成し、その中にサーバーのコードを書くファイルserver.jsを作成しましょう。 では、server.jsを開き、インストールしたmswライブラリから関数setupWorkerをインポートします：

src/api/server.jsimport { setupWorker } from 'msw/browser'

ファイルの下方で変数workerを作成し、それをエクスポートします：

src/api/server.jsexport const worker = setupWorker()

では、ファイルmain.jsxを開き、そこに私たちのワーカーをインポートしましょう：

main.jsximport { worker } from './api/server'

次に、それを私たちのアプリケーションに接続しましょう。 そのために、Reactアプリケーションのルートを作成するコードを関数でラップし、それをmainと呼ぶことにします。 その最初の行に、ワーカーの起動用の関数を追加します。 もちろん、main自体の呼び出しを忘れないようにしてください。 すべてのインポート行の後の完全なコードは、以下のようになります：

main.jsxasync function main() {
  await worker.start({ onUnhandledRequest: 'bypass' })

  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  )
}

main()

これで、ワーカーが起動する前に（そしてリクエストを送信する前に ;) ）、アプリケーションが動作を開始しないことが確実になります。

では、アプリケーションを起動し、ブラウザで開発者コンソールを開いてみましょう。 コンソールに '[MSW] Mocking enabled.' というテキストが表示されていれば、あなたは素晴らしく、すべてを正しくインストールしています!!!