6/26 mswと Redux Toolkitを組み合わせて使う

MSW (Mock Service Worker)

MSW はブラウザのネットワークリクエストをインターセプトし、モックのレスポンスを返すことができるツールです。これにより、実際のサーバーと通信することなく、API のレスポンスをシミュレートすることができます。

• コンポーネントが Redux の非同期アクションをディスパッチします（例：ユーザー情報を取得する fetchUser アクション）。
• fetchUser アクションは API リクエストを行います。
• MSW がこの API リクエストをインターセプトし、モックのレスポンスを返します。
• fetchUser アクションはこのレスポンスを受け取り、Redux の状態を更新します。

これにより、実際のサーバーと通信することなく、API リクエストの結果に基づいた Redux の状態の変化をシミュレートすることができます。

// mocks/handlers.js

import { rest } from 'msw';

export const handlers = [
  rest.get('/api/user', (req, res, ctx) => {
    return res(
      ctx.json({
        id: 1,
        name: 'John Doe',
      })
    );
  }),
];

mswの設定です

// features/user/userSlice.js

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk('user/fetchUser', async () => {
  const response = await fetch('/api/user');
  const data = await response.json();
  return data;
});

const userSlice = createSlice({
  name: 'user',
  initialState: { id: null, name: '' },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchUser.fulfilled, (state, action) => {
      state.id = action.payload.id;
      state.name = action.payload.name;
    });
  },
});

export const userReducer = userSlice.reducer;

createAsyncThunkで非同期アクションをします

// components/User.js

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUser } from '../features/user/userSlice';

export const User = () => {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user);

  useEffect(() => {
    dispatch(fetchUser());
  }, [dispatch]);

  return (
    <div>
      <h1>User</h1>
      <p>ID: {user.id}</p>
      <p>Name: {user.name}</p>
    </div>
  );
};

コンポーネントでdispatchします

// .storybook/preview.js

import { setupWorker } from 'msw';
import { handlers } from '../mocks/handlers';

const worker = setupWorker(...handlers);
worker.start();

// 他のStorybookの設定...

storybookの設定でmswを使用します

コメント

流れが分かってなかったので、まとめました。複雑になるとよくわからなくなる箇所がまだあるので、理解が浅いところを埋めていこうと思います。