1

i use redux toolkit with react native and mongodb (mongoose) i delete item and it successfully deleted from db but not in client and need to reload page 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;

apiCall:

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);
  }
};

main :

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

  const handleDelete = id => {
    deleteOneTodo(id, dispatch);
  };
ripouu
  • 93
  • 8

2 Answers2

0

you have to implement deleteTodo inside your todoSlice in order to remove the deleted id from your local state,

...
    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);
        },
      },
    });
  ...

and of course you have to pass the payload with the id of the todo you want to remove

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);
  }
};

if you still have doubts you can follow this tutorial: https://www.youtube.com/watch?v=fiesH6WU63I

gbravor
  • 81
  • 3
  • i think its bad practice..... its deleted from db so its should automatically removed from client if we do this ... and something happen in backend.. front will keep filtering it thats what i think – ripouu Jul 31 '21 at 10:52
  • it work in deleteOneTodo function after dispatch deleteTodo i add getTodos(dispatch) – ripouu Jul 31 '21 at 12:14
  • its not a bad practice, its just the way you have to handle your local state if you are using redux. i think a bad practice should be fetching your whole list of todos every time after you delete some todo from db, why would you do that? – gbravor Jul 31 '21 at 14:51
  • yep i think u r correct ... but what is there any solution like onSnapshot in firebase like in our case if something happen it still deleted in client side – ripouu Aug 01 '21 at 14:12
  • in case of using onSnapshot would be a good approach because onSnapshot fetches only the updated records and merges it into the old ones and then fires the callback in realtime, in this case i see you are doing api calls so it's not a realtime approach and that is why you may need to handle it different than before – gbravor Aug 01 '21 at 18:28
0

i just call 'getTodos' inside 'deleteOneTodo' and delete 'deleteTodo' from reducer i hope its a good practice

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);
  }
};
ripouu
  • 93
  • 8