// store.js (Redux with @reduxjs/toolkit)

import { configureStore, createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({

name: "counter",

initialState: { value: 0 },

reducers: {

increment: (state) => {

state.value += 1;

    },

decrement: (state) => {

state.value -= 1;

    },

incrementByAmount: (state, action) => {

state.value += action.payload;

    },

  },

});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

const store = configureStore({

reducer: {

counter: counterSlice.reducer,

  },

});

export default store;

_____________________________________________________________

// Counter.js (Redux with @reduxjs/toolkit)

import React from 'react';

import { useSelector, useDispatch } from 'react-redux';

import { increment, decrement, incrementByAmount } from './store';

const Counter = () => {

const count = useSelector((state) => state.counter.value);

const dispatch = useDispatch();

return (

<div>

<h1>{count}</h1>

<button onClick={() => dispatch(increment())}>Increment</button>

<button onClick={() => dispatch(decrement())}>Decrement</button>

<button onClick={() => dispatch(incrementByAmount(5))}>Increment by 5</button>

</div>

  );

};

export default Counter;

_____________________________________________________________

// store.js (Zustand)

import create from 'zustand';

const useStore = create((set) => ({

counter: 0,

increment: () => set((state) => ({ counter: state.counter + 1 })),

decrement: () => set((state) => ({ counter: state.counter - 1 })),

incrementByAmount: (amount) => set((state) => ({ counter: state.counter + amount })),

}));

export default useStore;

_____________________________________________________________

// Counter.js (Zustand)

import React from 'react';

import useStore from './store';

const Counter = () => {

const { counter, increment, decrement, incrementByAmount } = useStore();

return (

<div>

<h1>{counter}</h1>

<button onClick={increment}>Increment</button>

<button onClick={decrement}>Decrement</button>

<button onClick={() => incrementByAmount(5)}>Increment by 5</button>

</div>

  );

};

export default Counter;

Create Zustand Store: Use create to define your state and actions

Update Components: Replace useSelector and useDispatch with direct state manipulation using the Zustand store hook