На клиенте некорректно отображается информация при удалении данных из бд с использованием reduxThunk

Question

На клиенте некорректно отображается информация при удалении данных из бд с использованием reduxThunk

Рейтинг: 0Ответов: 1Опубликовано: 08.05.2023

Есть программа, которая должна выполнять добавление, изменение и удаление данных из бд. Клиентская часть написана на React, reduxToolkit, reduxThunk и axios. Серверная написана на node.js, express, mysql и в качеству ORM sequelize. Интерфейс такой:

Добавление работает корректно. Запрос уходит на сервер, данные добавляются в бд и новый пользователь сразу же отображается на клиенте (новая строка сразу встаёт в таблицу). Но удаление работает некорректно. Данные также уходят на сервер, из бд удаляются, но вот на клиенте изменения не отображаются. Т.е. чтобы увидеть изменение нужно перезагрузить страницу. Помогите пожалуйста решить эту проблему. Код слайса:

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { $basePath } from "../../basePath";

export const fetchUsers = createAsyncThunk(
  "user/fetchUsers",
  async function (id, thunkAPI) {
    try {
      const { data, statusText } = await $basePath.get("/user", {
        params: {
          ID: id,
        },
      });
      if (statusText !== "OK") {
        throw new Error("Ошибка загрузки данных с сервера");
      }
      return data;
    } catch (err) {
      return thunkAPI.rejectWithValue(err.message);
    }
  }
);

export const addNewUser = createAsyncThunk(
  "user/addUser",
  async function (newUserData, thunkAPI) {
    try {
      const { data, statusText } = await $basePath.post("/user", newUserData);
      if (statusText !== "OK") {
        throw new Error("Ошибка при добавлении");
      }
      //console.log(data);
      thunkAPI.dispatch(addUser(data));
    } catch (err) {
      return thunkAPI.rejectWithValue(err.message);
    }
  }
);

export const deleteUser = createAsyncThunk(
  "user/deleteUser",
  async function (id, thunkAPI) {
    try {
      const { data, statusText } = await $basePath.delete("/user", {
        data: {
          ID: id,
        },
      });
      if (statusText !== "OK") {
        throw new Error("Ошибка при удалении");
      }
      thunkAPI.dispatch(removeUser(data));
    } catch (err) {
      return thunkAPI.rejectWithValue(err.message);
    }
  }
);

const initialState = {
  users: [],
  loading: true,
  error: null,
};

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    addUser(state, action) {
      state.users.push(action.payload);
    },
    removeUser(state, action) {
      console.log(action.payload);
      state.users = state.users.filter(
        (user) => user.userId !== action.payload
      );
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state, action) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.loading = false;
        state.error = false;
        state.users = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.error = action.payload;
      });
  },
});

export const { addUser, removeUser } = userSlice.actions;

export default userSlice.reducer;

Код удаления в компоненте:

const deleteUserBtnClickHandler = (e) => {
    const currentTr = e.currentTarget.closest("tr");
    const userId = currentTr.dataset.code;
    dispatch(deleteUser(userId));
  }
  
  <button className="btn btn-error delete-btn" title="Удалить"
                  onClick={(e) => deleteUserBtnClickHandler(e)}
                >

Код контроллера на сервере:

 async deleteUser(req, res, next) {
    const { ID } = req.body;
    const newUserList = await users.destroy({
      where: {
        userId: ID,
      },
    });
    return res.json(newUserList);
  }

Тут стоит сказать, что я заметил одну проблему, которая скорее всего и является ошибкой. В коде контроллера переменная newUserList имеет тип данных number, следовательно на клиент в качестве ответа приходит число. И, почему-то, это число всегда равно единице (возможно потому что запрос прошёл успешно и вернулось true, которая конвертировалась в 1 по другому я объяснить не могу). Следовательно в слайсе, в строке state.users = state.users.filter( (user) => user.userId !== action.payload ); в action.payload лежит число. В общем если есть люди, которые писали API с применением sequelize или просто знающие люди, помогите пожалуйста.

reactjs axios redux sequelize.js redux-thunk

Источник: Stack Overflow на русском

Answer 1

▲ 0

Проблема вроде как решилась. Переписал редюсер removeUser следующим образом:

removeUser(state, action) {
      console.log(action.payload);
      const deletedUser = state.users.find(
        (user) => user.id === action.payload
      );
      state.users.splice(state.users.indexOf(deletedUser), 1);
    },

В асинхронном экшене deleteUser в dispatch передаю тот же id, что передаю и на сервер.

export const deleteUser = createAsyncThunk(
  "user/deleteUser",
  async function (id, thunkAPI) {
    try {
      const { statusText } = await $basePath.delete("/user", {
        data: {
          ID: id,
        },
      });
      if (statusText !== "OK") {
        throw new Error("Ошибка при удалении");
      }
      thunkAPI.dispatch(removeUser(id));
    } catch (err) {
      return thunkAPI.rejectWithValue(err.message);
    }
  }
);

На клиенте некорректно отображается информация при удалении данных из бд с использованием reduxThunk

Ответы