reactjs - React navigation - handling going back after deleting object from redux store

Question

I'm creating an app that uses redux to store all objects added by the user. I have a home screen where all objects are displayed, and from which the user can navigate to the specific one. On that screen, he can edit it and delete it from the app. I have a problem with implementing delete functionality, I want to dispatch action and navigate to the home screen. Currently, my code looks like that:

        // that's how I get object from store in Plant component
        const plant = useSelector((state) =>
        state.plants.plants.find((plant) => plant.id === props.route.params.plantId));

        // onPress deleteButton
        props.navigation.goBack();
        dispatch(deletePlant(plant.id));

        // reducer
        const updatedPlants = [...state.plants].filter((plant) => plant.id !== action.plantId);
        return { ...state, plants: updatedPlants };

But the problem is, my app crashes after deleting the plant because the plant variable is undefined on the Plant screen. Currently, I found a workaround, in the render function, I check if the plant variable is undefined, and if it is I just return empty View.

I feel there's a better way to do it, could you help me with it?

Answer 1

It have to nothing to do with going back, it's about render. No error should be throw during render.

1. if you are looping plants in your home page and rendering them, there should be no problem. unless your deletePlant is setting that data to undefined, not remove it from array like using splice.
2. if your home screen are hardcoded to display items inside plants, then check for a undefined value is common. if empty view is what you concern about, you can also return null as well.