Authentication with react-router-redux 5.x and redux-saga

Stepan Kuzmin
Jun 10, 2017 · 1 min read

Hi there! In this code tutorial I will show you how to handle authentication in Redux project using react-router 4.x with react-router-redux 5.x and redux-saga.

You will need to install latest version of react-router-redux from https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux

npm install --save react-router-redux@next
npm install --save history

Initial

First, we need to create router and saga middlewares, create store and run saga.

index.js

Reducer

Application state will have two parts: one for auth and one for router. Auth reducer will handle authentication events.

reducer.js

Saga

Saga will watch for AUTH_REQUEST action and handle authentication logic.

saga.js

Router

We are using router with two routes, one for Login component and one for Main component.

App.js

Main

Main is a stateless container component, that will redirect to Login if there is no token.

Main.js

Login

Login is a stateful container component that will dispatch AUTH_REQUEST action.

Login.js

That’s it.