Блог

Главная - Вопросы по программированию - Компонент не перезагружается после удаления объекта из состояния, я использую React-redux

Компонент не перезагружается после удаления объекта из состояния, я использую React-redux

#reactjs #redux #react-redux #frontend #web-frontend

#reactjs #redux #react-redux #интерфейс #веб-интерфейс

Вопрос:

Я работаю над онлайн-приложением для потокового вещания, в котором пользователь может создавать, редактировать, удалять и размещать потоки. Проблема в том, что когда я пытаюсь удалить поток, он удаляет его в базе данных, но мой основной компонент, в котором отображаются потоки, не перезагружается, хотя он перезагружается, когда пользователь создает или редактирует поток.

Вот мой создатель действий:

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

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

И вот редуктор:

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

Кроме того, не забывайте, что объекты интерполируются по ключам на моем сервере, т.Е. Вместо массива объектов у меня есть объект объектов.

Комментарии:

1. Возможно опубликовать код основного компонента. Есть ли какой-либо метод / epic для обновления основного компонента после DELETE_STREAMS ?

2. Вы говорите, что компонент не перезагружается, но не о том, действительно ли ключ был удален из состояния redux. Было ли это?

Ответ №1:

Множественная проблема! DELETE_STREAMS против DELETE_STREAM . Вы отправляете первое и уменьшаете на последнем.

Вот почему всегда полезно, чтобы ваши действия были где- то определены, даже если это справедливо export const X = "X" . Затем всегда ссылайтесь на них вместо использования строковых литералов.

Это не было ошибкой при обновлении вашего рендеринга React, но это сокращение никогда не обновлялось. Отличным инструментом для отладки этого является redux devtools https://github.com/reduxjs/redux-devtools , вы можете видеть состояние redux и каждое отправленное действие, а также его влияние.