redux-router.md

Routing after handling an action in Redux

Note: this are simplified example, concept only, not correct syntax etc.!

Approach one: use history object in thunk action creator

// my-app-history

import { createHashHistory as createHistory, History } from "history";
export default createHistory();

// my-actions.js
import history from "./my-app-history"

export function login(username) {
  return async (dispatch) => {
  
    // do some (async) things
    const userData = await fetch(...); 
    
    // dispatch one or more actions
    dispatch(userLoggedIn(userData));
    
    // change location
    history.push("/welcome-user");
  }
}

// Login component
export default function Login() {
  onLoginClick() {
    dispatch(login(username));
  }
  
  return <button onClick={onLoginClick}>Login</button>
}

Approach 2: 'await' dispatch and use history in your component

// my-actions.js
export function login(username) {
  return async (dispatch) => {
  
    // do some (async) things, same as above...
    const userData = await fetch(...); 
    
    dispatch(userLoggedIn(userData));
    
    // no history here!
  }
}

// Login component
export default function Login() {
  const history = useHistory();
  
  async onLoginClick() {
    // await action processing
    await dispatch(login(username));
    
    // re-route here
    history.push("/welcome-user");
  }
  
  return <button onClick={onLoginClick}>Login</button>
}