javascript - 当路由 mswjs/data 使用新项目填充数据库并删除前一个项目时，使其无法访问

Question

我使用next-redux-wrapper、MSW和将我的数据存储在存储中，以及模拟 API 调用和从模拟数据库中获取数据@mswjs/data。redux-toolkit

我有以下情况发生在我身上。

我在页面上，在控制台和终端中，我可以看到数据是从模拟数据库中/content/editor获取并从getStaticProps. Editor.js因此，现在 ID 1 到 6 在商店内可访问。
现在我点击加号图标来创建一个新项目。我填写对话框并按“保存”。一个 POST 请求开始，它处于挂起状态，然后它得到满足。新项目现在在模拟数据库和商店中，我现在可以看到 ID 1 到 7。
由于我点击了“保存”并且 POST 请求成功，我被路由/content/editor/7到查看新创建的项目。
现在我在 Page [id].js，它还从模拟数据库中获取数据，然后将其存储并水合到 redux 存储中。这个想法是，它获取先前存储的状态并将其与新数据（如果有的话）一起传播到存储中。
现在 ID 7 不再存在。ID 1 到 6 也不再存在，相反，我可以在控制台和终端中看到 ID 8 到 13 已创建，而之前的 ID 已不存在。

显然，这不是很好。当我创建一个新项目然后切换路由时，我应该能够访问新创建的项目以及之前创建的项目。但相反，它们都被覆盖。

它要么与next-redux-wrapperor有关系MSW，但我不知道如何使它工作。我需要帮助。我现在将发布一些代码：

代码

获取静态道具

// path example: /content/editor
// Editor.js

export const getStaticProps = wrapper.getStaticProps(
  (store) =>
    async ({ locale }) => {
      const [translation] = await Promise.all([
        serverSideTranslations(locale, ['editor', 'common', 'thesis']),
        store.dispatch(fetchProjects()),
        store.dispatch(fetchBuildingBlocks()),
      ]);

      return {
        props: {
          ...translation,
        },
      };
    }
);

// path example: /content/editor/2
// [id].js
export const getStaticProps = wrapper.getStaticProps(
  (store) =>
    async ({ locale, params }) => {
      const { id } = params;

      const [translation] = await Promise.all([
        serverSideTranslations(locale, ['editor', 'common', 'thesis']),
        store.dispatch(fetchProjects()),
        // store.dispatch(fetchProjectById(id)), // issue: fetching by ID returns null
        store.dispatch(fetchBuildingBlocks()),
      ]);

      return {
        props: {
          ...translation,
          id,
        },
      };
    }
);

模拟数据库

工厂

我将把代码缩短为相关位。我将删除项目的属性，以及用于生成数据的辅助函数。

const asscendingId = (() => {
  let id = 1;
  return () => id++;
})();

const isDevelopment =
  process.env.NODE_ENV === 'development' || process.env.STORYBOOK || false;

export const projectFactory = () => {
  return {
    id: primaryKey(isDevelopment ? asscendingId : nanoid),
    name: String,
    // ... other properties
  }
};

export const createProject = (data) => {
  return {
    name: data.name,
    createdAt: getUnixTime(new Date()),
    ...data,
  };
};

/**
 * Create initial set of tasks
 */
export function generateMockProjects(amount) {
  const projects = [];
  for (let i = amount; i >= 0; i--) {
    const project = createProject({
      name: faker.lorem.sentence(faker.datatype.number({ min: 1, max: 5 })),
      dueDate: date(),
      fontFamily: getRandomFontFamily(),
      pageMargins: getRandomPageMargins(),
      textAlign: getRandomTextAlign(),
      pageNumberPosition: getRandomPageNumberPosition(),
      ...createWordsCounter(),
    });
    projects.push(project);
  }
  return projects;
}

API 处理程序

我将把它缩短为仅 GET 和 POST 请求。

import { db } from '../../db';

export const projectsHandlers = (delay = 0) => {
  return [
    rest.get('https://my.backend/mock/projects', getAllProjects(delay)),
    rest.get('https://my.backend/mock/projects/:id', getProjectById(delay)),
    rest.get('https://my.backend/mock/projectsNames', getProjectsNames(delay)),
    rest.get(
      'https://my.backend/mock/projects/name/:id',
      getProjectsNamesById(delay)
    ),
    rest.post('https://my.backend/mock/projects', postProject(delay)),
    rest.patch(
      'https://my.backend/mock/projects/:id',
      updateProjectById(delay)
    ),
  ];
};

function getAllProjects(delay) {
  return (request, response, context) => {
    const projects = db.project.getAll();
    return response(context.delay(delay), context.json(projects));
  };
}

function postProject(delay) {
  return (request, response, context) => {
    const { body } = request;
    if (body.content === 'error') {
      return response(
        context.delay(delay),
        context.status(500),
        context.json('Server error saving this project')
      );
    }

    const now = getUnixTime(new Date());
    const project = db.project.create({
      ...body,
      createdAt: now,
      maxWords: 10_000,
      minWords: 7000,
      targetWords: 8500,
      potentialWords: 1500,
      currentWords: 0,
    });
    return response(context.delay(delay), context.json(project));
  };
}

// all handlers
import { buildingBlocksHandlers } from './api/buildingblocks';
import { checklistHandlers } from './api/checklist';
import { paragraphsHandlers } from './api/paragraphs';
import { projectsHandlers } from './api/projects';
import { tasksHandlers } from './api/tasks';

const ARTIFICIAL_DELAY_MS = 2000;

export const handlers = [
  ...tasksHandlers(ARTIFICIAL_DELAY_MS),
  ...checklistHandlers(ARTIFICIAL_DELAY_MS),
  ...projectsHandlers(ARTIFICIAL_DELAY_MS),
  ...buildingBlocksHandlers(ARTIFICIAL_DELAY_MS),
  ...paragraphsHandlers(ARTIFICIAL_DELAY_MS),
];

// database
import { factory } from '@mswjs/data';

import {
  buildingBlockFactory,
  generateMockBuildingBlocks,
} from './factory/buildingblocks.factory';
import {
  checklistFactory,
  generateMockChecklist,
} from './factory/checklist.factory';
import { paragraphFactory } from './factory/paragraph.factory';
import {
  projectFactory,
  generateMockProjects,
} from './factory/project.factory';
import { taskFactory, generateMockTasks } from './factory/task.factory';

export const db = factory({
  task: taskFactory(),
  checklist: checklistFactory(),
  project: projectFactory(),
  buildingBlock: buildingBlockFactory(),
  paragraph: paragraphFactory(),
});

generateMockProjects(5).map((project) => db.project.create(project));

const projectIds = db.project.getAll().map((project) => project.id);
generateMockTasks(20, projectIds).map((task) => db.task.create(task));
generateMockBuildingBlocks(10, projectIds).map((block) =>
  db.buildingBlock.create(block)
);

const taskIds = db.task.getAll().map((task) => task.id);
generateMockChecklist(20, taskIds).map((item) => db.checklist.create(item));

项目切片

我也将把它缩短为相关的片段。

// projects.slice.js
import {
  createAsyncThunk,
  createEntityAdapter,
  createSelector,
  createSlice,
  current,
} from '@reduxjs/toolkit';
import { client } from 'mocks/client';
import { HYDRATE } from 'next-redux-wrapper';

const projectsAdapter = createEntityAdapter();
const initialState = projectsAdapter.getInitialState({
  status: 'idle',
  filter: { type: null, value: null },
  statuses: {},
});

export const fetchProjects = createAsyncThunk(
  'projects/fetchProjects',
  async () => {
    const response = await client.get('https://my.backend/mock/projects');
    return response.data;
  }
);

export const saveNewProject = createAsyncThunk(
  'projects/saveNewProject',
  async (data) => {
    const response = await client.post('https://my.backend/mock/projects', {
      ...data,
    });
    return response.data;
  }
);

export const projectSlice = createSlice({
  name: 'projects',
  initialState,
  reducers: {
    // irrelevant reducers....
  },
  extraReducers: (builder) => {
    builder
      .addCase(HYDRATE, (state, action) => {
        // eslint-disable-next-line no-console
        console.log('HYDRATE', action.payload);

        const statuses = Object.fromEntries(
          action.payload.projects.ids.map((id) => [id, 'idle'])
        );

        return {
          ...state,
          ...action.payload.projects,
          statuses,
        };
      })
      .addCase(fetchProjects.pending, (state, action) => {
        state.status = 'loading';
      })
      .addCase(fetchProjects.fulfilled, (state, action) => {
        projectsAdapter.addMany(state, action.payload);
        state.status = 'idle';
        action.payload.forEach((item) => {
          state.statuses[item.id] = 'idle';
        });
      })
      .addCase(saveNewProject.pending, (state, action) => {
        console.log('SAVE NEW PROJECT PENDING', action);
      })
      .addCase(saveNewProject.fulfilled, (state, action) => {
        projectsAdapter.addOne(state, action.payload);
        console.group('SAVE NEW PROJECT FULFILLED');
        console.log(current(state));
        console.log(action);
        console.groupEnd();
        state.statuses[action.payload.id] = 'idle';
      })
      // other irrelevant reducers...
      },
});

这应该是所有相关代码。如果您有任何问题，请提出问题，我会尽力回答。

score 0 · Accepted Answer

我改变了状态的补水方式，所以我打开了这段代码：

      .addCase(HYDRATE, (state, action) => {
        // eslint-disable-next-line no-console
        console.log('HYDRATE', action.payload);

        const statuses = Object.fromEntries(
          action.payload.projects.ids.map((id) => [id, 'idle'])
        );

        return {
          ...state,
          ...action.payload.projects,
          statuses,
        };
      })

进入这段代码：

      .addCase(HYDRATE, (state, action) => {
        // eslint-disable-next-line no-console
        console.group('HYDRATE', action.payload);

        const statuses = Object.fromEntries(
          action.payload.projects.ids.map((id) => [id, 'idle'])
        );

        state.statuses = { ...state.statuses, ...statuses };
        projectsAdapter.upsertMany(state, action.payload.projects.entities);
      })

我使用适配器更新所有条目。

javascript - 当路由 mswjs/data 使用新项目填充数据库并删除前一个项目时，使其无法访问

代码

获取静态道具

模拟数据库

工厂

API 处理程序

项目切片

1 回答 1

Related

Reference