Call function after dispatch from redux has finished
There is another way which I use, as suggested by the official Redux tutorials.
add an enum status
to your state, and also a variable error = null
Then you can assign various types of status to them. In your case
status = "idle" | "pending" | "failed" | "loggedin" | "loggedout";
Then in your thunk,
if (login succeeds)
status = 'loggedin';
else {
status = 'failed';
error = 'e.message if you are using try catch';
}
In your functional component,
const {status,error} = useSelector(state => ({state.status,state.error}));
const dispatch = useDispatch();
useEffect(()=>{
if(status === "loggedin")
// don't forget to reset the status
dispatch(setStatus('idle'));
history.push('/dashboard');
if(status === "failed")
dispatch(setStatus('idle'));
console.log(error);
},[status]);
I think what you are looking for is Redux Saga.
You can use the TakeEvery Effect, which will trigger the function you want every time a specific action is called.
Example :
import { takeEvery } from `redux-saga/effects`
function* fetchUser(action) {
...
}
function* watchFetchUser() {
yield takeEvery('USER_REQUESTED', fetchUser)
}
Take a look at the doc and read this article
Have your action creator return a promise. This way when you invoke it, you can use .then() and in your then handler you can push a new address to the history.
Thunks will return functions normally, but a promise differs in that you can act after completion.
Example:
static myActionCreator(somevar) {
return dispatch => {
return new Promise((resolve, reject) => {
dispatch({
type: "myaction",
something: somevar
});
resolve()
});
}
}
So in this case, your thunk returns a promise. Then when you invoke like this:
this.props.myActionCreator(somevar)
.then(() => {
this.props.history.push('/winning')
})
This thunk is just dispatching an action, but you could have some async call in there that has a callback, etc. and you resolve on completion.
I had similar confusion and ended up spending quite a time working on solving the problem through callbacks and javascript promises which is not required at all because of react-redux setup.
this.props.clearReducersState()
this.props.history.push('/dashboard')
I was trying to go to my dashboard after my clearReducerState() function is dispatched. This code works just fine.
You need to do nothing react-redux works on a synchronous way, so you can simply do this. You can use history.push in your action too for that,
import { withRouter } from 'react-router-dom';
this.props.clearReducersState(this.props.history)
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(UpdateAid))
And in your action,
export const clearReducersState = (history) => dispatch => {
history.push('/dashboard')
}
However, if you are updating your state using reducers it is better to use history.push in your index file to avoid problems.
Use as per your requirement. Hope this helps.