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
1 year 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

Best Websites for Building Resumes

In this article, we will explore five top websites that can assist you in crafting a compelling resume to increase your chances of getting shortlisted by companies.

1 year ago By Mitali Gupta
How to identify Stack Questions? How to identify Stack Questions?

In this article, you will get clarity about how to find any given question that can be solved using stack.

1 year ago By Aniket Prajapati
Stack all Interview Questions .

In this Article all the problems related to stack is been uploaded for coding interview. Here there are questions which will help building your concept on stack from beginner to advance and you will be able to tackle any stack interview problem very easily.

1 year ago By Aniket Prajapati
EdKool.com Launches: A New Destination for All Things Education & Technology

We're delighted to announce the launch of EdKool.com, a unique platform designed to bridge the gap between education and technology.

1 year ago By Santosh Kshirsagar