Programmatically Navigate using react-router

Question

I am developing an application in which I check if the user is not loggedIn. I have to display the login form, else dispatch an action

Answer 1

Another alternative is to handle this using Thunk-style asynchronous actions (which are safe/allowed to have side-effects).

If you use Thunk, you can inject the same history object into both your component and Thunk actions using thunk.withExtraArgument, like this:

import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'
import { createBrowserHistory } from "history"
import { applyMiddleware, createStore } from "redux"
import thunk from "redux-thunk"

const history = createBrowserHistory()

const middlewares = applyMiddleware(thunk.withExtraArgument({history}))
const store = createStore(appReducer, middlewares)

render(
  
      
    ,
appDiv)

Then in your action-creators, you will have a history instance that is safe to use with ReactRouter, so you can just trigger a regular Redux event if you're not logged in:

// meanwhile... in action-creators.js
export const notLoggedIn = () => {
  return (dispatch, getState, {history}) => {
    history.push(`/login`)
  }
}

Another advantage of this is that the url is easier to handle, now, so we can put redirect info on the query string, etc.

You can try still doing this check in your Render methods, but if it causes problems, you might consider doing it in componentDidMount, or elsewhere in the lifecycle (although also I understand the desire to stick with Stateless Functional Compeonents!)

You can still use Redux and mapDispatchToProps to inject the action creator into your comptonent, so your component is still only loosely connected to Redux.