Get in touch

Write to us at : support@yapapp.net

How to Use Redux Framework in angular and react Application

Redux is a predictable state management library for JavaScript apps. This is developed by Facebook, based on the Flux Pattern, and widely used in the React Library.

Many people may be confused with Redux and Flux, but they are quite different to each other with main difference in how they handle actions.

For example, Flux offers multiple stores and a dispatcher, while Redux has only single store, which means a dispatcher is not needed.

This article is focused on showcasing different methods of using Redux Framework in Angular and React Application.

Using Redux in an Angular application

Using Redux in Angular framework is quite easy, and anyone can do this with the NgRx library, a reactive state management library.

This helps developers to get all events from Angular app and place them all in the same place. The developers will need to get the required stored data from the store using the RxJS library.

Project Setup

It all begins with Project Setup. It is quite easy to use Redux and the NgRx library to setup project, which we demonstrate here by creating a simple Todo application.

Start with installation of angular-cli on our computer. To check if angular-cli is installed in your device, open a terminal and type ng –version. If it is installed, you will see something like this (see figure 1).

If you can’t see this, then install angular-cli on your machine.

Project Setup

Now, proceed to generate a fresh Angular CLI application with the help of the following command in the terminal: ng new ngrx-todo.

ng new ngrx-todo

Once the Angular app is created, check if everything is working well using “ng serve” inside the terminal. Make sure to test the bootstrap app on a browser using the link: http://localhost:4200.

Implementation

The project setup is the first step. Now it is time to implement our ToDo app. Begin with creating a new module for your app. You can run “ng g module todos” in the terminal and then import in the app.module.ts file as can be seen below:

Implementation

For the components and common files, you can use the following folder structure of the TodosModule:

The fun begins now. The next step here is to start coding. You can begin with importing the modules that are required to use in the todos.module.ts:

It is pertinent to mention here that the Store is like an internal database in NgRx that reflects the state of our application. The data related to your StoreModule’s will be contained in the Store.

Using Redux in a React Application

Redux is a solution that emits updates in response to actions. When working on React Applications, there are multiple components that can be used. It is important to create a link between the component data and functions, that need to be passed each other. Redux is helpful in creating the link. Here is a step-by-step guide to using Redux in a React Application.

Create a React App

The first step here is to create a React Application. If you are new to creating a React Application, here is how you can create one for you. Open your terminal on your machine and write the following commands:

create-react-app simple_counter
cd simple_counter

With this code, you can create your own basic React Application boilerplate and you can enter the directory. Please use the given command on your machine to open the project n VS code in case you have installed Visual Studio Code editor.

code .

In case you are not using the VS code editor for creating the basic React Application, you can open the project in any editor you like. Please use the following command to start the react DEV server.

yarn Start

Or

npm start

Now, you can open the Code Editor and then open src/App.js file. Make sure to delete all the codes present and then add the following code inside the Code Editor:

import React from ‘react’;
import ‘./App.css’;const Counter = (props) => (
<div>
<h2>Counter: </h2>
<input type=’button’ value=’add’ />
<input type=’button’ value=’subtract’ />
</div>
);const App = () => (
< Counter />
);export default App;

Now you can save your file on your system inside your terminal and then run the following command on the system:

yarn Start

Or

npm start

Implementation into React

Now that you have successfully done the basic part, now is the time to start its implementation to React. Proceed to installing Redux and React Redux libraries into your React Application. Following are the 2 common commands that can be used:

Once you have successfully installed these packages, it is time to start the process to set-up your store. The next step here is to convert the example from the above to React. Here, we have placed the reducer files in the React Directory and imported it.

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
import { Provider } from ‘react-redux’;
import { createStore } from ‘redux’;
import rootReducer from ‘./reducer’
const store = createStore(rootReducer)
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById(“root”)
);

You may also need to import the Provider components that can help make your store available to all the components. So, surrounding the highest order components is the easiest place to put it.

Final Words

Although we have mentioned all the possible steps to use Redux Framework in Angular and React applications, it is important to keep checking the performance after every step, so you know that your app is working as expected.

About The Author

Megha is currently working as a Senior Python, ROR & JS frameworks developer . She is passionate about her work and enjoys interacting with her team. Besides work, Megha enjoys pragmatism in poetry, writing for social causes, exploring the connections between world politics & literature.

Get Connected.

Write to us at : support@yapapp.net

Copyrights © 2016-2019 YapApp. All Rights Reserved