CODEWITHSUNDEEP
javascriptreactjsreact-reduxreact-router
Liv Marx
Liv Marx

Reputation: 365

Redirecting after deleting page / route in React and Redux

As practice using react, react-router, and redux, I am making a very small app that has two models: vacuums and stores. In my app you can see all vacuums, all stores, a single vacuum or a single store. You can add and delete instances of vacuums and stores form the single page view.

The problem I am having is that after deleting a vacuum or store, my app breaks because the route no longer exists.

I tried adding a NotFound component and route but because I am using variables inside of routes (/vacuums/:id), it does get there.

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

Delete function using 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 };
      }
}

Upvotes: 0

Views: 4360

Answers (1)

Matt Carlotta
Matt Carlotta

Reputation: 19762

Since you're using redux, from your Singlevacuums component pass this.props.history from the component to your deleteVacuum action creator:

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)

Then in your action creator (always try/catch your promises, otherwise, when they fail -- and they will -- your app won't crash!!!):

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

Upvotes: 1

Related Questions