Как сделать рендеринг одного и того же компонента после удаления с помощью реакции и редукса?

Question

код для справки

//Component
delete = (id) => {
    this.props.deleteContentItem(id, this.props.history)
}

//action.js
export const deleteContentItem = (id, history) => dispatch => {
    axios.delete(`${API_ROOT}/mcenter/admin/delete/${id}`)
        .then(res => {
            dispatch({
                type: DELETE_CONTENT,
                payload: res.data
            })
            history.push('/mcenter')
        })
        .catch(err =>
            dispatch({
                type: GET_ERRORS,
                payload: err.response.data
            })
        );
}

Я нахожусь на /mcenter URL и должен обновить ту же страницу после действия удаления.

Моя проблема:

После удаления Это не повторная визуализация компонента.

Любая помощь будет высоко ценится.

Answer 1

Вам просто нужно задать setState, где состояние - это возвращенные данные или ошибка?

Answer 2

У меня есть решение для вас. У меня тоже была такая же проблема в те дни. Во всяком случае, один из моих друзей сказал мне, что сделать все неизменным - это решение. Проблема не в действии. Вы должны сделать некоторые изменения в редукторах.

import { List } from 'immutable';

export default function (state = {loading:false}, action) {
switch (action.type) {
     case 'DELETE_CONTENT':
        let currentProjects = List(state.Plist)
        let index = currentProjects.findIndex(i=>i.ProjectId===action.payload)
        let newProjectList = currentProjects.splice(index,1).toJS();
        return { ...state, Plist: newProjectList ,loading:false};
     default:
        return state;
}

}

Используйте такой подход.

Answer 3

export const deleteContentItem = (id, history) => dispatch => {
    axios.delete(`${API_ROOT}/mcenter/admin/delete/${id}`)
        .then(res => {
            dispatch({
                type: DELETE_CONTENT,
                payload: res.data
            })
           this.getsomedata();//get any data for your page inside then
        })
        .catch(err =>
            dispatch({
                type: GET_ERRORS,
                payload: err.response.data
            })
        );
}