Introduction

This is a react module which can be used to simplify login functionality for a MVP. It uses redux for state management. This project was bootstrapped with Create React App.

Installation

This is a react.js module available through the npm registry. Installation is done using the npm install command:

$ npm i login-module-ideabits

Basic Usage

Integrating redux

In order to use this module you need to integrate our reducer and saga into your application.

First import our main module tou your main reducer file and saga file with the following command:

import { UserModule } from 'login-module-ideabits'

Then you can access our saga and reducer like,

Saga

UserModule.sagas.loginSaga_ideabits

Reducer

<anystateName>: UserModule.reducers.loginReducer

Using module

Import our module into the component where you want to display the login page.

import { LoginCustom } from 'login-module-ideabits'

Then pass the ui component into our component like this,

<LoginCustom loginForm={<YourUIcomponent> />}/>

In your UI component you need to dispatch our action which is exported from our library. You can access our action like this,

UserModule.actions.loginRequest

**Note: Make sure you import UserModule from our library as mentioned above

In your login form submit method you need to create the below object in order to communicate with back-end.

Example form submit,

<form onSubmit={(values => this.submit(values))}>

Example creating object,

submit = values => {
    const config = {
      apiurl: 'http://localhost:5000/api/V1/login', <This is the api endpoint url>
      method: 'POST',
      data: {
        email: '[email protected]',
        password: '1234'
      }
    }
  }

After this you need to dispatch our action with the object created inside submit method.

submit = values => {
    const config = {
      apiurl: 'http://localhost:5000/api/V1/login', <This is the api endpoint url>
      method: 'POST',
      data: {
        email: '[email protected]',
        password: '1234'
      }
    }
    this.props.loginRequest(config)
  }

Response handling

Our reducer will have all the errors and success messages in our reducer and you can access it through our reducer as follow,

function mapStateToProps(state) {
  return {
    <anyPropName>: state.<state name you added when you combine reducers>
  };
}

once you setup the state, it will hold the following attributes,

userDetails,
fetching,
error

You can access those as,

this.props.<anyPropName>.userDetails