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?

 

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

 

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.

 

 

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 the form of a type and payload and modifies the state based on additional provided 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: 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 use connect with a component 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 use connect with a component and enable it to receive store state from the provider 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.

npm install react-redux or yarn add react-redux
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. 

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './App'

const store = createStore(rootReducer);

render(<Provider store={store}>
          <App />
       </Provider>,
 document.getElementById('root'));

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,

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from "redux-thunk";
import * as serviceWorker from './serviceWorker';

const store = createStore(applyMiddleware(thunk));

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
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.