Component isn't reloading after deleting an object from the state, I'm using React-redux

Question

I'm working on an online streaming app where the user can create, edit, delete, and host streams. The problem is when I try deleting the stream, it deletes it in the database but my main component where the streams are being displayed doesn't reload, although it reloads itself when the user creates or edits the stream.

Here's my action creator:

export const deleteStream = (id) => async dispatch => {
  await streams.delete(`/streams/${id}`);

  dispatch({ type:'DELETE_STREAMS', payload: id });
  history.push('/');
}

And here's the reducer:

const streamReducer = (state = {}, action) => {
  switch(action.type){
    case 'DELETE_STREAM':
      return {...state, [action.payload]: undefined};
      //I also used lodash to delete it alternatively as- return _.omit(state, action.payload);
    default:
      return state;
  }
}

Also, not to forget that the objects are key interpolated in my server i.e., instead of having an array of objects, I have an object of objects.

Answer 1

Plural problem! DELETE_STREAMS vs DELETE_STREAM. You dispatch the former and reduce on the latter.

This is why it's always a good idea to have your actions defined somewhere even of its just export const X = "X". Then always reference them instead of using string literals.

It wasn't an error updating your React rendering, but that redux was never updated. A great tool to debug this is redux devtools https://github.com/reduxjs/redux-devtools, you can see the state of redux and every dispatched action and it's impact.