The world of web development is one of the most exciting sectors in the industry. There is a wide array of tools and libraries available, many of which address ways to make an application more efficient and effective.Take advantage of every new opportunity, but make sure that you are aware of what's going on. Testing and optimizing your application with code is a great way to improve and optimize, but you won't see any improvements unless you are aware of what's going on. As an extension of this, we'll discuss what Redux is and how it can be used to create amazing React apps.

What is Redux?

Redux is a library that helps you manage your project's state. Its concept is based on Flux, however it arose from the difficulty of developing Flux applications. If you've ever built a Flux application, you'll quickly see that Redux handles all of the boilerplate you used to have to write manually. Unlike Flux, you also have a single state container. This is a huge advantage because it makes sharing state and reusing code in your application much easier.

Store:

A store functions similarly to a state container. This is where actions are dispatched and controlled, as well as where your state is stored. When you're first developing a Redux app, think about how you want to portray your app and how you want to maintain track of its state. This is significant because Redux recommends only having one store, and because state is shared, it's a good idea to think about this before getting started.

Actions:

Actions are objects that specify how we want to change our current state. You can think of actions as your state tree's API.To illustrate, an action for adding a new user could be:

{

  type: 'ADD_USER',

  data: {

    name: 'Foo',

    email: 'foo@bar.com',

    password: 'Foobar123_'

  }

}

The action object should be built with a builder to make things clearer and easy to reuse. In the example above, you'd write a function called addUser(name, email, password) to construct the object. As you can see, deeds by themselves are meaningless. A simple object that defines how we wish to change the state is an action.

Reducers:

Actions are entertaining, but they don't always make sense on their own. In this case, reducers come in handy. Reducers in your store are action handlers that act on dispatched actions and transform them to state changes. If we dispatched it in our store, we might construct a reducer that would pick up an action like ADD USER and add a new user record to our state.

1.Build Your React Application

To begin with, we will first use create-react-app to build the application. Type in the following command on your terminal to get started with the application:

create-react-app simple_counter 

cd simple_counter

The aforementioned command generates boilerplate code for React. Simply click the next to enter the directory. Follow the steps outlined below if you're working on a visual studio. Code. Now, open your editor and type the following to start the react dev server:

yarn start 

Or, 

npm start

This will display a screen confirming the start of the application.

2.Library Installation

The next step is to set up all of your libraries and tools. Simply copy and paste the code below into the src file to start your development server.

3.Download the chrome extension

To work with your server, you'll need to install and configure the Redux Chrome extension.

4.Import Libraries

Run the code above by pasting the CSS code below into your source file.

5.Architectural Viewpoint

It has three primary elements that we have discussed above in detail about  store, reducer, and action.

6.Defining Actions

We'll use the simple example of addition and subtraction to help you understand how actions are defined and the functionality that goes with them.

// Actions Type

const MULTIPLY_NUMBER = 'mul_number';

const SUBTRACT_NUMBER = 'sub_number';

// Actions

const mulAction = () => ({

    type: MULTIPLY_NUMBER,

    payload: 1,

});

const subAction = () => ({

    type: SUBTRACT_NUMBER,

    payload: 2,

});

7.Reducer in React

We've created a mathReducer that accepts two parameters: state and action. A default value of 0 is supplied for the state argument, which is used to initialize the value of the state when the store is created for the first time. The value passed is used to update the current state value in the following scenarios.

8. Redux Store Creation

// Store

const store = createStore(

    rootReducer,

    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

);

There are two parameters in the below-mentioned store. The first parameter is the root reducer, and the second is the code to show the same on Chrome.

9. Props mapping

Here we made use of two different function,one is mapStateToProps and other one is mapDispatchToProps

// mapStateToProps

const mapStateToProps = (state => {

    return {

        number: state.math.number,

    };

});

// mapDispatchToProps

const mapDispatchToProps = dispatch => ({

    multiply: () => dispatch(mulAction()),

    subtract: () => dispatch(subtractAction()),

});

10.Connect and Render Redux

const Counter = (props) => (

    < div >

        < h2 >Counter: {props.number}< /h2 >

        < input type='button' value='multiply' onClick={props.mul} / >

        < input type='button' value='subtract' onClick={props.subtract} / >

    < /div >

);

const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

const App = () => (

    < Provider store={store} >

        < ConnectedCounter / >

    < /Provider >

);

This is the last phase in the process. We've constructed a counter function with three states: props.number, props.sub, and props.mul. Each of the states can be invoked and accessed as needed.

Wrapping Up

The use of Redux considerably enhances the React application. It increases the application's predictability and maintainability. Not to mention that it simplifies the debugging and testing of React applications. If you're still not convinced, enlist the assistance of the top react development company. As a well-known react development agency, we've helped hundreds of clients around the world with state management solutions to improve the performance of their React-Redux applications.

Actions are entertaining, but they don't always make sense on their own. In this case, reducers come in handy. Reducers in your store are action handlers that act on dispatched actions and transform them to state changes. If we dispatched it in our store, we might construct a reducer that would pick up an action like ADD USER and add a new user record to our state.