title: React Redux store not updating on delete of an item from state
body: <p>I am using <code>@reduxjs/toolkit</code> to create <code>delete</code> reducer a as follows:</p>
  <pre><code>const slice = createSlice({
    name: &quot;hotels&quot;,
    initialState: {
      list: [],
      loading: false,
      lastFetch: null,
    },
    reducers: {
      hotelsRequested: (hotels) =&gt; {
        hotels.loading = true;
      },
      hotelsRequestFailed: (hotels) =&gt; {
        hotels.loading = false;
      },
      hotelsReceived: (hotels, action) =&gt; {
        hotels.list = action.payload;
        hotels.loading = false;
        hotels.lastFetch = Date.now();
      },
  
      hotelDeleted: (hotels, action) =&gt;
        hotels.list.filter((hotel) =&gt; hotel.slug !== action.payload.slug),
    },
  });
  
  export const {
    hotelsReceived,
    hotelsRequestFailed,
    hotelsRequested,
    hotelDeleted,
  } = slice.actions;
  export default slice.reducer;
  
  </code></pre>
  <p>Delete action is below</p>
  <pre><code>export const loadHotels = () =&gt; (dispatch, getState) =&gt; {
    const { lastFetch } = getState().entities.hotels;
    const diffInMinutes = moment().diff(lastFetch, &quot;minutes&quot;);
    if (diffInMinutes &lt; 10) return;
    dispatch(
      hotelApiCallBegan({
        url: hotelUrl,
        onStart: hotelsRequested.type,
        onSuccess: hotelsReceived.type,
        onError: hotelsRequestFailed.type,
      })
    );
  };
  export const deleteHotel = (slug) =&gt;
    hotelApiCallBegan({
      url: `/hotel/${slug}/delete/`,
      method: &quot;delete&quot;,
      onSuccess: hotelDeleted.type,
    });
  </code></pre>
  <p>Here is the middleware</p>
  <pre><code>export const hotelsApi = ({ dispatch }) =&gt; (next) =&gt; async (action) =&gt; {
    if (action.type !== actions.hotelApiCallBegan.type) return next(action);
  
    const { onStart, onSuccess, onError, url, method, data } = action.payload;
  
    if (onStart) dispatch({ type: onStart });
  
    next(action);
    try {
      const response = await axiosInstance.request({
        baseURL,
        url,
        method,
        data,
      });
  
      //General
      dispatch(actions.hotelApiCallSuccess(response.data));
      //Specific
      if (onSuccess) dispatch({ type: onSuccess, payload: response.data });
    } catch (error) {
      //general error
      dispatch(actions.hotelApiCallFailed(error.message));
      //Specific error
      if (onError) dispatch({ type: onError, payload: error.message });
    }
  };
  </code></pre>
  <p>When i click on delete button on ui using <code> onClick={() =&gt; this.props.onDelete(hotel.slug)}</code> i can see on the networks tab on chrome dev tools that the hotel is deleted. But the state remains unchanged until page refresh. What could be wrong here?</p>