Managing State in React with Redux Store

For building React applications, Redux is a widely used data store. It works on a fundamental convention that data storage and binding should flow in one direction and be single for an application. Redux serves according to a few approaches; first, the store is a sole object with fields for each collection of data. Second, the data gets updated by prompting an action that signifies how the data should modify. Third, actions are carried out and data gets updated with the help of reducers. A reducer is a function that cover actions to data and returns a new state, instead of mutating the previous state.

Let's discuss below how the state can be managed where Redux stores and retrieves the data in a standardized manner. The article will be following a procedural three-step approach for the same.

Step 1: Create and Set Store

In this step, we will be installing redux and react-redux packages using npm, where redux will connect actions and reducers; react-redux includes bindings to execute the redux store in our react project. This functionality will send actions to the components and then pull the data from the store into the components.

npm install --save redux react-redux

After the packages get installed, we will need to connect redux into our application. To utilize redux, we will have to wrap the root components with a Provider to assure that the store is catered to all the child components in the tree. In order to do that, we will need to import Provider component from react-redux package.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';

ReactDOM.render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

Now that the components are wrapped, the next step will be to append a store. The store typically collects the data and manages the state. We will import the createStore function from redux, then pass a function returning an object. This functionality will be depicted as follows:

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

const store = createStore(() => ({
  fruits: [
    {
      name: 'apple',
      cart: 1
    }
  ]
}));

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

In the above code, we are returning an object with a field called fruits that is stored as an array of respective fruits. Each fruit has a name and cart, the item which is added to the basket. We save the function output to a variable store, then pass it to the prop in the Provider.

Conclusion

Redux enacts as a single store. It can befit an application when we are working with components, that need a trivial source of information. When we have a small project, managing the state in Redux is considered a preferable choice since the segregated components will be able to utilize in-built state management. We may also find that distributed storage in Redux is demanding to retain data integrity. Henceforth, it is not always treated as an appropriate choice in all applications.

I will be coming up with the next portion of the article where the subsequent steps will depict the actions and reducers, to display the data and then dispatch the modifications for the component.

Stay Tuned!

Managing State in React with Redux Store

Part 1

Step 1: Create and Set Store

Conclusion