I have created a live coding version for this tutorial. Check it at here: https://youtu.be/MdeqXWo4fOI

Login is usually the first page we have to build in almost any app. In this tutorial, we will build a interactive and intuitive login form with React & Redux.

Here are some features of our login form:

  • It has an email field and a password
  • When user clicks submit, it will show a message to indicate that it is sending request to server.
  • When receiving response, it will show login status.

An ugly wild login form appears 🙂

Prerequisite libraries

  • create-react-app: I always use this library to create my React project, it will install React and some scripts with make our React app running
  • redux: our state management
  • redux-thunk: we use this library to compose some actions and create flow for login
  • redux-logger: this library logs every changes to Redux store

Application state

Because we only have a login form, our application state is pretty simple, it has 3 attributes:

  • isLoginPending: indicates when login has sent login request
  • isLoginSuccess: indicates if login successful
  • loginError: contains the error message if login fail

Let’s create some actions for these attributes

Simulating login request

Here is the source code to simulating our login request. We provide email, password and a callback. If email and password are correct, it will call the callback and pass a null parameter. Otherwise, it will pass an error object.

Compose actions together

Now we can write an action to actual send login request and dispatch our actions!

So when this action is dispatched, it set login pending status to true, login success to and login error to null. After that it calls our simulated login api.

The reducer

Here is the function that actually makes change to our Redux store

Nothing is complicated at here

UI component

Here is the login form. In practice, we should separate this component into smart and dump components. But for our tutorial, this is enough.

In this component, we connect our application to Redux store. Mapping isLoginPending, isLoginSuccess and loginError to the form. These attributes will indicate form status.

When form is submitted, it takes email and password from from and dispatchs the login action.

That’s our login form with React and Redux. In real app, you usually do something more like: store login token to Redux store after login success or redirect to homepage. I guess these things are too easy for you now 🙂

You can grab the source code at here: https://github.com/davidtran/react-redux-login-flow

Let me know if you have any question.