Redux With React JS In A Super Simple

0
86

Written By: Muhammad Shahzeb ( Researcher, Full Stack Developer )

Introduction

When you want to build medium or large-scale applications in React JS or any JavaScript base applications then you must need Redux with React JS for managing states. Because when there are any number of components and so many states and you need to send and receive data from one state to another state for that if you are not using any state management library then your code becomes very lengthy and complex. So you should go to use any state management library.

Redux is very important and popular for state management in JavaScript-based applications. Normally more than half JavaScript-based applications use Redux for state management.

Here we will see how to use redux with react JS in a very simple way. We are mainly focused on the beginning and basic steps of using the redux setup with react Js. As we know we can develop any application with any technology when we have a strong grip on the basis of that technology.

Redux: is a state management library predictably in JavaScript applications. Redux can run in a different environment such as the client-side, server-side, or natively. Its size is only 2 KB with including dependencies.

Let’s break the definition into three parts to better understand.

⦁ Is it for React JS applications?
No Redux is not tied with react Js only it can be used with angular Vue etc.
⦁ Is Redux is a state container?
Yes, Redux is a state container it stores the states of an application
⦁ Is it predictable?
Yes, redux is predictable we can understand by a simple example.


What Is Blockchain Career Heading?


Example

In an employee management system, employee registration is pending until employee verification completed.

When registration verified than in redux all state transitions are explicit possible to keep track of them this change in application state becomes predictable.

There are three principles of redux

⦁ Store
⦁ Action
⦁ Reducer

React redux: is the official binding library for redux with react application. It provides support to the component to read data from the store via getState() function and allow the state to be updated data via dispatch() function.

redux with react js

Let’s create a react Js application and add redux. I will be considering that your machine is ready to create React app by installing create-react-tool and node JS.

Step 1

Create-react-app my-book-store

CD my-book-store

Npm start

npm

Step 2

Npm install –save redux react-redux

Steps to create react redux application

⦁ Design the store
What do you want to keep in the store?
⦁ Define the actions
What actions user can perform on this application?
⦁ Create a reducer
Create one or more reducers, these reducers take an action and return updated state.
⦁ Set up the store
Finally, we need to set up the store based on the reducer.

Step 3

Now make a general product structure that can use a boilerplate for every react redux application and user friendly for all developers

We will make the components folder for storing our application component in the src folder.
Inside components folder create BookContaner.js component  Redux folder for storing complete redux logic like stores, actions, and reducers in the src folder.

redux with react js

Step 4

Inside the redux folder we will make book name folder because we are dealing with bookselling concept.

Inside book folder

1) Create book Action.js for file for holding all activities related to the book.
2) Create bookReducer.js file for holding all Reducers.
3) Create booktype.js file for holding all types related to books.

Inside redux folder

⦁ Create index.js file for export of all types.
⦁ Create store.js file for holding store.

redux with react js

App.js file code

import React from “react”;

import {Provider} from “react-redux”;

import “./App.css”;

import BookContainer from “./components/bookContainer”;

import store from “./redux/store”;

function App() {
return (
//wrap the whole application with Provider now redux coverup
//whole application and give props store
<Provider store={store}>
<div className=”App”>
//display component
<BookContainer />
</div>
</Provider>
);
}

export default App;

Redux structure flow of this app like

structure flow

BookContaoner.js

import React from “react”;
//import buybook type from index.js
import { buybook } from “../redux”;
//import connect for connection between react and redux
import { connect } from “react-redux”;

//props data come form parent
const BookContainer = (props) => {
return (
<div>
<h2>book container {props.numberOfBooks}</h2>
<button onClick={props.buybook}>book</button>
</div>
);
};

//function name is only written to follow naming convention
// return inital state value that is define in bookReducer.js
const mapStateToProps = (state) => {
return {
numberOfBooks: state.numberOfBooks,
};
};

//function name is only written to follow naming convention
//this function return updated state
const mapDispatchtoProps = (dispatch) => {
return {
buybook: function () {
dispatch(buybook());
},
};
};
// prvide connection between redux and react
export default connect(mapStateToProps, mapDispatchtoProps)(BookContainer);

bookAction.js

//import type for action
import { BUY_BOOK } from “./bookType”;

export const buybook = () => {
return {
type: BUY_BOOK,
};
};

bookReducer.js

import { BUY_BOOK } from “./bookType”;
//define initial state
const initailState = {
numberOfBooks: 10,
};
// reucer function take two parameters first is state
//second is action that what user want
const bookReducer = (state = initailState, action) => {
//use switch so we can add more one action result in future
switch (action.type) {
case BUY_BOOK:
return {
…state,
numberOfBooks: state.numberOfBooks – 1,
};
default:
return state;
}
};

export default bookReducer;

Spread operator: – to clone sate value.

Store.js

⦁ Hold the application state value.
⦁ Allow Access to state via getState()
⦁ Allow State to be updated via dispatch(action)
⦁ Resister listener via subscribe(listener)
⦁ Handle unregistering of listener via the function returned by subscribe(listener)

import { createStore } from “redux”;
//import reducer fuction to create store
import bookReducer from “./book/bookReducer”;

//pass bookReducer to create store for whole application
const store = createStore(bookReducer);
export default store;

bookType.js

//define all type in this file
export const BUY_BOOK = “BUY_BOOK”;

index.js

//exprot all action via this file it will increase our control on all actions
export { buybook } from “./book/bookAction”;

Conclusion

Well, all comments in the code express what statement is doing. Now, after reading this you should create your own project and copy and paste the same code and start debugging. By practice, you will learn a lot.

 

Leave a reply