CRUD Operation Using React Redux - Part Two

Introduction

 
In my last article, we learned the basics of React & Redux, and how to set or initialize the predefined React Application using the create-react-app command.
 
Now we will learn about Redux Architecture and cover the following points with this article:
  • Introduction of Redux Architecture & How Redux works
  • Benefits of Redux Architecture
  • Brief introduction to the role of Action, Dispatch, Reducer, State, Provider, Connect
  • Step By step configuration to develop Redux Architecture in React applications.

What is Redux? CRUD Operation Using React Redux

 
Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
 

Understanding how Redux works

 
The way Redux works is simple. There is a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another.

There are three building parts: actions, store, and reducers. Let’s briefly discuss what each of them does. This is important because they help you understand the benefits of Redux and how it’s to be used. We’ll be implementing a similar example to the login component above but this time in Redux.
  • Store in Redux
  • Actions in Redux
  • Reducers in Redux
CRUD Operation Using React Redux
 

How to use Redux to React?

 
React and Redux are tied together with the aid of the UI binding library. React bindings for Redux separate presentational components from container components. This ensures that the developer builds simple applications that allow components to be reused. Here is how the presentational and container components differ from each other.
 
CRUD Operation Using React Redux
 

Brief Introduction of the role of Action, Dispatch, Reducer, State, Provider, Connect

  • Action: An object setting up information about our data moving into the state.
  • Dispatch: Functions that act as a bridge between our actions and reducers, sending the information over to our application.
  • Reducer: A function that receives data information from our action in theform of a type and payload and modifies the state based on additionalprovided data.
  • State: Once we have our actions and reducers set up, everything is maintained in our store. The store is where we can set up our initial state,combine our reducers, apply middleware, and hold our information.
  • Provider: Wecan then use the provider to wrap our store around our application and by doing so, pass and render our state. We can then use connect with acomponent and enable it to receive store state from the provider.
  • Connect: We can then use the provider to wrap our store around our application and by doing so, pass and render our state. We can then useconnect with a component and enable it to receive store state from theprovider where all the data from our reducers are passed into a central source.
We will use all the above concepts or functionality while dealing with Redux Architecture.
 

Step By Step Configuration Of Redux Architecture

 
For configuration of redux structure in react applications, we need to perform the following actions in the React application. 
  1. Install Packages
  2. Create Store, which can allow us to use variable usage globally in the whole application anytime.
  3. Create a store with thunk which works as a middleware which works as store enhancers
  4. Initialize provider  for wrapping our store's state
  5. Connect store, provider, middleware with each other and pass in the root of the application so that we can use the redux extensibility in the whole application.

Step 1 - Install Package

After configuring the  React application, we need to install the react-redux and redux package to use Redux functionality.
  1. npm install react-redux or yarn add react-redux    
  2. npm install redux or yarn add redux  
Step 2 - Configuring Your Store or Creating Store (In index.js) 
 
Create your store so that you can use each state of the application at any time in the application. You need to wrap the whole store into Provider, so wrap-pass store into the provider. 
  1. import React from 'react'      
  2. import { render } from 'react-dom'      
  3. import { Provider } from 'react-redux'      
  4. import { createStore } from 'redux'      
  5. import App from './App'      
  6.       
  7. const store = createStore(rootReducer);      
  8.       
  9. render(<Provider store={store}>      
  10.           <App />      
  11.        </Provider>,      
  12.  document.getElementById('root'));     
  13.      
  14. serviceWorker.unregister();   
Step 3 - Extending Redux functionality with middleware
 
There is much middleware available, but let me show you the use of redux-thunk middleware. Most apps extend the functionality of their Redux store by adding middleware or store enhancers (note: middleware is common, enhancers are less common). Middleware adds extra functionality to the Redux dispatch function; enhancers add extra functionality to the Redux store. 
  •  The redux-thunk middleware, which allows simple asynchronous use of dispatch.
  •  A middleware that logs dispatched actions and the resulting new state.
  •  An enhancer which logs the time taken for the reducers to process each action.

    npm install redux-thunk or yarn add redux-thunk 
Let's connect store with middleware,
  1. import React from 'react';  
  2. import ReactDOM from 'react-dom';  
  3. import App from './App';  
  4. import { Provider } from 'react-redux';  
  5. import { createStore, applyMiddleware } from 'redux';  
  6. import thunk from "redux-thunk";  
  7. import * as serviceWorker from './serviceWorker';  
  8.   
  9. const store = createStore(applyMiddleware(thunk));  
  10.   
  11. ReactDOM.render(  
  12.     <Provider store={store}>  
  13.         <App />  
  14.     </Provider>, document.getElementById('root'));  
  15.   
  16. // If you want your app to work offline and load faster, you can change    
  17. // unregister() to register() below. Note this comes with some pitfalls.    
  18. // Learn more about service workers: http://bit.ly/CRA-PWA    
  19. serviceWorker.unregister();   

Summary

 
By this article, you can configure redux structure into your react application, you just need to install several required packages, create a store, wrap store into provider and  connect all this with middleware. In this way, you can set up a redux structure.
 
In the next article, we will learn How to perform CRUD operations using the React-Redux structure.