Store-compare

* Zustand
import create from 'zustand';
import produce from 'immer';

const useStore = create((set) => ({
  counter: 0,
  increment: () => {
    set(produce((state) => {
      state.counter += 1;
    }));
  },
}));

// Usage in a component
function CounterComponent() {
  const counter = useStore((state) => state.counter);
  const increment = useStore((state) => state.increment);
  
  return (
    <div>
      <span>Counter: {counter}</span>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

------------------------------------------------------------------------
* Redux

import { createStore } from 'redux';
import produce from 'immer';

// Action types
const INCREMENT = 'INCREMENT';

// Action creators
const increment = () => ({ type: INCREMENT });

// Reducer
const initialState = { counter: 0 };
const reducer = (state = initialState, action) => {
  return produce(state, (draft) => {
    switch (action.type) {
      case INCREMENT:
        draft.counter += 1;
        break;
      default:
        break;
    }
  });
};

// Store
const store = createStore(reducer);

// Usage in a component
function CounterComponent() {
  const counter = store.getState().counter;

  const increment = () => {
    store.dispatch(increment());
  };
  
  return (
    <div>
      <span>Counter: {counter}</span>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

------------------------------------------------------------------------

* Recoil

import { atom, useRecoilState } from 'recoil';
import produce from 'immer';

// Atom
const counterState = atom({
  key: 'counterState',
  default: { counter: 0 },
});

// Usage in a component
function CounterComponent() {
  const [counter, setCounter] = useRecoilState(counterState);

  const increment = () => {
    setCounter(produce(counter, (draft) => {
      draft.counter += 1;
    }));
  };

  return (
    <div>
      <span>Counter: {counter.counter}</span>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

------------------------------------------------------------------------

* Mobx

import { makeObservable, observable, action } from 'mobx';
import { useObserver } from 'mobx-react-lite';
import produce from 'immer';

// Store class
class CounterStore {
  counter = 0;

  constructor() {
    makeObservable(this, {
      counter: observable,
      increment: action,
    });
  }

  increment() {
    this.counter = produce(this.counter, (draft) => {
      draft.counter += 1;
    });
  }
}

// Usage in a component
function CounterComponent() {
  const counterStore = new CounterStore();

  return useObserver(() => (
    <div>
      <span>Counter: {counterStore.counter}</span>
      <button onClick={counterStore.increment}>Increment</button>
    </div>
  ));
}


------------------------------------------------------------------------

* Jotai

import { useStore } from 'jotai';
import { produce } from 'immer';

// Atom
const counterAtom = atom({ counter: 0 });

// Usage in a component
function CounterComponent() {
  const [counter, setCounter] = useStore(counterAtom);

  const increment = () => {
    setCounter(produce((draft) => {
      draft.counter += 1;
    }));
  };

  return (
    <div>
      <span>Counter: {counter.counter}</span>
      <button onClick={increment}>Increment</button>
    </div>
  );
}