msw(모킹 서버 워커)

세팅

아래 코드의 위치는 위와 같다.
import { setupWorker } from "msw";
const handler = [...Object.values(TodoApi)];
export const worker = setupWorker(...handler);

//todoApi에 벨류들이 담겨서
// t const getTodo = rest.get("/api/todo", async (req, res, ctx) => {
// return res(ctx.status(200), ctx.json(todoMock));
// todoMock데이터를 응답해준다.

App.js

import { worker } from "mock/handler";
function App() {
if (process.env.NODE_ENV === "development") {
worker.start();
}

todo.js

import { createSlice } from "@reduxjs/toolkit";
import { createAsyncThunk } from "@reduxjs/toolkit";

const initialState = {
todos: [],
addTodoState: {
    loading: false, //모두 초기값을 설정을 해줬다.
    done: false,
    err: null,
},
};

extraReducers: (builder) => {
  builder.addCase(addTodo.pending, (state) => {
// 로딩중이라고 생각하면 됨
    state.addTodoState.loading = true;
    state.addTodoState.done = false;
    state.addTodoState.err = null;
});
  builder.addCase(addTodo.fulfilled, (state, action) => {
//thunk가 return한 값은 action.payload
    state.todos.unshift(action.payload);
    state.addTodoState.loading = false;
    state.addTodoState.done = true;
    state.addTodoState.err = null;
});
  builder.addCase(addTodo.rejected, (state, action) => {
    state.addTodoState.loading = false;
    state.addTodoState.done = true;
    state.addTodoState.err = action.payload;
});
//dispatch를 세번씩 나누지 않아도 자동으로 상태를 업데이트 해준다.
//addTodo fulfilled
},
});