Last active
June 6, 2023 05:48
-
-
Save Ishaan28malik/311b201374b94917e3417c757cc32145 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* 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> | |
); | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment