从 apiCall 删除项目需要重新加载页面才能从客户端删除答案

【问题标题】：delete item from apiCall need reload page to deleted from client从 apiCall 删除项目需要重新加载页面才能从客户端删除
【发布时间】：2021-07-30 22:07:23
【问题描述】：

我使用带有 react native 和 mongodb (mongoose) 的 redux 工具包我删除项目并成功从数据库中删除但不在客户端，需要重新加载页面 todoSlice：

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

export const todoSlice = createSlice({
  name: 'todos',
  initialState: {
    todos: [],
    pending: null,
    error: null,
  },
  reducers: {
    deleteTodo: (state, action) => {
      return state
    },
  },
});
export const {deleteTodo} = todoSlice.actions;

export default todoSlice.reducer;

api调用：

import axios from 'axios';
import {deleteTodo} from './todoSlice';

export const deleteOneTodo = async (id, dispatch) => {
  try {
    await axios.delete(`http://10.0.2.2:5000/todos/${id}`);
    dispatch(deleteTodo());
  } catch (err) {
    console.log(err);
  }
};

主要：

 const {todo} = useSelector(state => state);
  const dispatch = useDispatch();
  const {todos} = todo;
  useEffect(() => {
    getTodos(dispatch);
  }, []);

  const handleDelete = id => {
    deleteOneTodo(id, dispatch);
  };

【问题讨论】：

标签： mongodb react-native mongoose react-redux redux-toolkit

【解决方案1】：

您必须在 todoSlice 中实现 deleteTodo 才能从本地状态中删除已删除的 id，

...
    export const todoSlice = createSlice({
      name: 'todos',
      initialState: {
        todos: [],
        pending: null,
        error: null,
      },
      reducers: {
        deleteTodo: (state, action) => {
          return state.filter((todo)=>todo.id!==action.payload.id);
        },
      },
    });
  ...

当然，您必须使用要删除的待办事项的 ID 传递有效负载

export const deleteOneTodo = async (id, dispatch) => {
  try {
    await axios.delete(`http://10.0.2.2:5000/todos/${id}`);
    dispatch(deleteTodo({id:id}));
  } catch (err) {
    console.log(err);
  }
};

如果您仍有疑问，可以按照本教程进行操作：https://www.youtube.com/watch?v=fiesH6WU63I

【讨论】：

我认为这是不好的做法......它已从数据库中删除，因此如果我们这样做，它应该自动从客户端中删除......并且后端发生了一些事情......前端将继续过滤它就是这样我认为
它在调度 deleteTodo 后在 deleteOneTodo 函数中工作我添加 getTodos(dispatch)
这不是一个坏习惯，如果您使用 redux，这正是您必须处理本地状态的方式。我认为一个不好的做法应该是每次从数据库中删除一些待办事项后都获取整个待办事项列表，你为什么要这样做？
是的，我认为你是正确的......但是在我们的案例中，有什么像 onSnapshot 这样的解决方案在我们的案例中，如果发生某些事情，它仍然会在客户端删除
如果使用 onSnapshot 将是一个好方法，因为 onSnapshot 仅获取更新的记录并将其合并到旧记录中，然后实时触发回调，在这种情况下，我看到您正在执行 api 调用所以这不是一种实时方法，这就是为什么您可能需要以不同于以前的方式处理它

【解决方案2】：

我只是在“deleteOneTodo”中调用“getTodos” 并从减速器中删除“deleteTodo” 我希望这是一个好的做法

export const deleteOneTodo = async (id, dispatch) => {
  try {
    await axios.delete(`http://10.0.2.2:5000/todos/${id}`);
     // i add this line => 
    getTodos(dispatch);
  } catch (err) {
    console.log(err);
  }
};

【讨论】：