React Redux store не обновляется при удалении элемента из состояния - PullRequest
Новая
       64

React Redux store не обновляется при удалении элемента из состояния

1 голос
/ 14 июля 2020

Я использую @reduxjs/toolkit для создания delete reducer a следующим образом: 

const slice = createSlice({
  name: "hotels",
  initialState: {
    list: [],
    loading: false,
    lastFetch: null,
  },
  reducers: {
    hotelsRequested: (hotels) => {
      hotels.loading = true;
    },
    hotelsRequestFailed: (hotels) => {
      hotels.loading = false;
    },
    hotelsReceived: (hotels, action) => {
      hotels.list = action.payload;
      hotels.loading = false;
      hotels.lastFetch = Date.now();
    },

    hotelDeleted: (hotels, action) =>
      hotels.list.filter((hotel) => hotel.slug !== action.payload.slug),
  },
});

export const {
  hotelsReceived,
  hotelsRequestFailed,
  hotelsRequested,
  hotelDeleted,
} = slice.actions;
export default slice.reducer;

Действия удаления ниже 

export const loadHotels = () => (dispatch, getState) => {
  const { lastFetch } = getState().entities.hotels;
  const diffInMinutes = moment().diff(lastFetch, "minutes");
  if (diffInMinutes < 10) return;
  dispatch(
    hotelApiCallBegan({
      url: hotelUrl,
      onStart: hotelsRequested.type,
      onSuccess: hotelsReceived.type,
      onError: hotelsRequestFailed.type,
    })
  );
};
export const deleteHotel = (slug) =>
  hotelApiCallBegan({
    url: `/hotel/${slug}/delete/`,
    method: "delete",
    onSuccess: hotelDeleted.type,
  });

Вот промежуточное ПО 

export const hotelsApi = ({ dispatch }) => (next) => async (action) => {
  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 });
  }
};

Когда я нажимаю кнопку «Удалить» в пользовательском интерфейсе, используя onClick={() => this.props.onDelete(hotel.slug)}, я вижу на вкладке сетей в инструментах chrome dev, что отель удален. Но состояние остается неизменным до обновления страницы sh. Что здесь может быть не так?

1 Ответ

2 голосов
/ 14 июля 2020

Вам необходимо вернуть список отелей: 

return hotels.list.filter((hotel) => hotel.slug !== slug);

или 

hotelDeleted: (hotels, action) => hotels.list.filter((hotel) => hotel.slug !== action.payload.slug)

// Обновить

Для использования иммера (используется под капотом инструментарием ), удалить придется по другому. Без фильтра. 

 hotelDeleted: (hotels, action) => {
  const { slug } = action.payload;
  const index = hotels.list.findIndex((hotel) => hotel.slug !== slug);
  hotels.list.splice(index, 1);
},
...