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;

React State Management Made Easy: Zustand and Redux Explained

Other Articles