Перенаправление после удаления страницы / маршрута в React и Redux

Question

Как практика, использующая реагировать, реагировать на маршрутизатор и на редуксе, я делаю очень маленькое приложение, которое имеет две модели: пылесос и магазины.В моем приложении вы можете увидеть все пылесосы, все магазины, один пылесос или один магазин.Вы можете добавлять и удалять экземпляры пылесосов и магазинов в режиме просмотра одной страницы.

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

Я попытался добавить компонент и маршрут NotFound, а потому что я использую переменныевнутри маршрутов (/ vacuums /: id) он туда попадает.

<Switch>
   <Route exact path="/stores" component={Allstores} />
   <Route exact path="/stores/add" component={storesAddForm} />
   <Route exact path="/stores/:storeId" component={Singlestores} />
   <Route exact path="/vacuums" component={Allvacuums} />
   <Route exact path="/vacuums/add" component={vacuumsAddForm} />
   <Route exact path="/vacuums/:vacuumsId" component={Singlevacuums} />
   <Route component={NotFound} />
</Switch>

Удалите функцию, используя redux:

export const REMOVE_VACUUM = 'REMOVE_VACUUM';

export const removeVacuum = vacuumId => {
  return {
    type: REMOVE_VACUUM,
    vacuumId: vacuumId,
  };
};

const deleteVacuum = id => {
    return async (dispatch, getState) => {
       const deleted = await axios.delete(`/api/allVacuums/${id}`);
       dispatch(removeVacuum(id));
    };
};

const rootReducer = (state = initialState, action) => {
      switch (action.type) {
        case REMOVE_VACUUM:
             const arr = state.vacuums.filter(
                   vacuum => vacuum.id !== action.vacuumId
                   );
             return { ...state, vacuums: arr };
      }
}

Answer 1

Поскольку вы используете приставку, от вашего Singlevacuums компонента проходит this.props.history от компонента к вашему deleteVacuum создателю действия:

import React, { PureComponent } from 'react';
import { deleteVacuum } from '../actions/vacuumActions';

class Singlevacuums extends PureComponent {

  handleClick = id => {
    const { deleteVacuum, history } = this.props;

    deleteVacuum(id, history); // delete vacuum action action creator
  }

  render = () => (
    <div>
    {this.props.vacuums.map(({ id }) => (
      <button id={id} onClick={() => this.handleClick(id)}>Delete Vacuum</button>
    ))}
    </div>
  )
}

export default connect(state=> ({ vacuums: state.vacuums }), { deleteVacuum })(Singlevacuums)

Затем в вашем создателе действия (всегда try/catchваши обещания, в противном случае, когда они терпят неудачу - и они будут - ваше приложение не будет падать !!!):

const deleteVacuum = (id, history) => async dispatch => {
    try {
       await axios.delete(`/api/allVacuums/${id}`); // remove vacuum from API
       dispatch(removeVacuum(id)); // remove vacuum from redux state
       history.push('/'); // redirect user to "/" or where ever 
    catch (err) {
       console.error(err);
    }
};