Content

  • Add Redux to React Application
  • Implementing Signup
  • Implementing Sign in
  • Add IE Support
  • Implementing Sign out

 

Add Redux to React Application

Redux is a predictable state container for JavaScript apps. From the very beginning, we need to stress that Redux has no relation to React. You can write Redux apps with React, Angular, Ember, jQuery, or vanilla JavaScript.

Redux is used mostly for application state management. To summarize it, Redux maintains the state of an entire application in a single immutable state tree (object), which can’t be changed directly. When something changes, a new object is created (using actions and reducers).

Let add required packages to our project

Next, create primary folders for a react redux application

Next, we should create our Combine reducer’s function.  Combine reducer takes a hash of reducers and returns a single reducer. The resulting reducer calls every child reducer and gathers their results into a single state object. The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to combineReducers()

We normally put our combineReducers() function in index.js file under reducers folder.

our combineReduce()  function has only redux-form reducer now but we will add our reducers in our next steps.

Now that we setup Reducers, let add it to our application’s entry point. So open “Index.js” file and modify it as below:

Now if you check your application it must run as previously.

Implementing Signup

For adding signup to our react-redux application, we need to create 4 files

  • Signup Component (We already create it but it only displays a text instead of signup form)
  • Signup Action creators
  • Action Types file
  • Signup Reducer

Let first create our action types and action creator:

Create a new file named Types.js under actions folder.

we need 3 action types for register start, succeed and fail.

Next create AuthActions.js file

Our first action is registerUser. This action will call our dotnet application’s Register API we already wrote in the previous section, so we need to install axios (or any other package) to be able to call this API.

Next, let write our register action

next create our authentication reducer

There is nothing specific we need to do in our reducer for now. Our Authentication State needs only one property to show the registration error. So we only prepare our “AuthReducer” to receive required action types for future enhancements.

We should add this reducer to combineReducers function so open reducers\index.js file and modify it as below.

For creating our signup form we should install redux-form package to our project.

we also need to add redux-form reducer to combineReducers function

Let first create our component using redux-form and register a new user on form submit. After completing submit we will navigate the user to login page. To do this we will add “withRouter” to our component, so you will be able to programmatically navigate to another page after submitting the form.

Now run the application, navigate to signup page and try to submit it. Below error will occur :

This error occurs because we wrote async actions and babel does know how to translate it. To solve this problem we should add below packages:

Open .babelrc file and add this package as a plugin :

For more information about this babel plugin check https://babeljs.io/docs/en/babel-plugin-transform-runtime.

Now run the application once more, you should be able to submit new user and check email and password in the console of the browser.

Implementing Sign in

We need 3 action types for login to succeed and login failed and fetch token.

Add these types to “Authactions.js” file:

Our next action is loginUser. This action will call /connect/token API that we already wrote in the previous section.

Import jwt decode to authAction.js file and write loginuser action as below:

Next step is to add sign in to “authreducer”. First, we should update our initial state by adding few properties.

  1. User : to keep login user’s info
  2. isLogin: to determine if user is logged in or not (actually it is 3 state option. Null value means that we are checking login state.
  3. Login_error: to display error message of the login form.

After preparing the initial state, we should create our action creators as below:

Let first create our component using redux-form and try to log form data when user clicks on submit button.

Now run your application and try to register a user and then login in with it.

Next, we will try to restrict unauthorized users to access the feature page. For this purpose, we will create a base component to load authentication needed components in it. This component is going to check if the user is logged in (isLogin = true), and then display its child component to the user. Otherwise (isLogin = false) it will redirect the user to login page. We also going to handle delay that will occur when our application is checking the authentication state (isLogin = null).

Let’s create “RequiredAuth” component:

And modify it as below:

Next, we should add this component to index.js file and change Feature route as below:

Now if we run the project, below error will be shown:

… Support for the experimental syntax 'classProperties' isn't currently enabled. Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
To fix this let first add @babel/plugin-proposal-class-properties package to project:

Then modify .babelrc file as below :

Now run the project once again and try to navigate to feature page, you should see “Authorizing…” message. Go to the login page and try to login with your user then navigate to Feature one more time, now you will see “This is Feature.js. Only authenticated Users allowed.” Message.

Just one thing left to do, we should automatically authenticate users that already get the token. For this purpose first, we need an authentication action to load things related to authentication. So open authAction.js file and add below:

Need a component to check authentication token before other components are shown to users. First create startup component:

Modify this file as below:

Now add this component in index.js file.

If we run the application, it will check the token at startup and if no token found, the application will redirect us to the login page. Otherwise, if it found a valid token, we will be navigated to the home page.

Add IE Support

To be able to run our application in IE 11 and below, we need to add polyfills to our app. First, add a polyfill of ES6 Promise:

Then create a folder named “Polyfills” under “src” folder and create “index.js” file in this folder:

Add startWith() and assign() polyfills to this file:

We may add any other polyfill to this file later.

Import these polyfills to “…/src/index.js” file as below:

Open .babelrc file and modify it as below:

Now if you run the application in Internet Explorer, it should be performed as expected.

Implementing Sign out

Our authentication components will be completed by adding a sign-out to it. So first let’s create our action type. Open Types.js file and add below:

Then open AuthActions.js file and add userSignout() to it:

Next, open authreducer.js file and add below:

Create “signout” component under “auth” folder:

Then modify it as below:

add Signout to index component :

There a few other features to complete our components like “forget password” and “change password” that we will not cover in this article but you may find them in our completed project on GitHub (https://github.com/imnapo/cn-react-dotnetcore).