Limited Period Offer : 20% Discount on online/offline courses, for more details call/whatsapp

React State Management Made Easy: Zustand and Redux Explained

2 min read
2 years ago By Mitali Gupta
React State Management Made Easy: Zustand and Redux Explained

State management is a concept in computer science and software development. It refers to the process of managing the data (state) within an application, ensuring that it remains consistent and accessible throughout its lifecycle. The state represents the current condition or snapshot of an application at any given moment, including variables, user inputs, and other relevant data.

Let's explore Redux and Zustand, two state management libraries commonly used in JavaScript applications. Despite their shared purpose, they adopt distinct approaches and offer unique advantages.

Redux

  • Follows the Flux architecture (An architecture that Facebook uses internally when operating with React ).
  • It centralizes the state in a single global store.
  • It uses actions and reducers for state updates.
  • Suitable for large-scale applications with complex state interactions.
  • Emphasizes immutability and unidirectional data flow (data flow which React.js uses).
  • Can be complex due to boilerplate code.

terminal:

npm install redux react-redux

store.js:

import { createStore } from 'redux';

// Action Types
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// Reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
};

// Create Redux Store
const store = createStore(counterReducer);

export default store;

Counter.js:

import React from 'react';
import { connect } from 'react-redux';

const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

const mapStateToProps = (state) => ({
  count: state
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: INCREMENT }),
  decrement: () => dispatch({ type: DECREMENT })
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

App.js:

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <div>
        <Counter />
      </div>
    </Provider>
  );
}

export default App;

Zustand

  • It is inspired by Recoil and uses React hooks. Recoil is a state management library developed by Facebook specifically for managing the state in React applications. It introduced the concept of "atoms" and "selectors" to manage and share state in a more intuitive and flexible way.
  • It has a decentralized state, allowing multiple independent stores.
  • It utilizes React context API for easy state access and updates within components.
  • It is more lightweight and straightforward compared to Redux.
  • It is great for smaller projects or simpler state management needs.

terminal:

npm install zustand

store.js:

import create from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}));

export default useCounterStore;

Counter.js:

import React from 'react';
import useCounterStore from './store';

const Counter = () => {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

App.js:

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;
Aug 03, 2023 12:00 Back to Articles

Other Articles

What is Agile Development ? What is Agile Development ?

Agile development is a software development approach that emphasizes flexibility, collaboration, and continuous delivery. It involves iterative development, continuous feedback, a collaborative approach, adaptability, and continuous improvement.

2 years ago By Mitali Gupta
Binary Tree

Binary Tree is a Non-Linear data structure which has atmost 2 child . A Binary tree is represented by a pointer to the topmost node (commonly known as the “root”) of the tree. If the tree is empty, then the value of the root is NULL. Each node of a Binary Tree contains the following parts:

2 years ago By Aniket Prajapati
Creating a Spinner Using Pure HTML and CSS Creating a Spinner Using Pure HTML and CSS

In this article, we will explore how to create a stylish spinner using pure HTML and CSS. The animated circle rotates indefinitely, offering visual feedback for ongoing processes on your web pages.

2 years ago By Mitali Gupta
How to connect aws RDS instance using mysql workbench

Learn to connect RDS instance(mysql/mariadb) using mysql workbech.

2 years ago By Santosh Kshirsagar