Error handling in react redux with useSelector hook

I am using useSelector hook in my UI. But I can not handle the error that is coming form the API. I can see the reducer is getting updated with the error in my redux state. When I am going to show this error in UI, its not showing. The submit button is in the Modal popup.
Like below:

UI ----

const dispatch = useDispatch();

const {error} = useSelector((state) => {
error: state.error
})

const handleModalSubmit = () => {
dispatch(myReducerFunction())
// here I wan to catch the error like which is not working.
if(error) {
// this error is showing as null or the previous redux state not the updated one which is coming from the reducer
}
}

Top comments (4)

CAYDE • Nov 12 '20

If error in showing in redux store , then your useSelector is wrong, try using
const error = useSelector(states => states.reducerName.field)

developersatyajit • Nov 12 '20

Not like that. Error is updating my global state. I can see that. See my attachment. But in the component level it is not coming after the dispatch. The same approach is working in other component. Only difference is this is in a modal popup. There is a button when user clicks on the button it will dispatch the action and then reducer will update my state with error object. Upto this everything is working fine. Now I just want to console log the error after the dispatch call. I guess I have to write a promise there in UI or wait for your solution.