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.