যুস্ট্যান্ড - একটি ফ্রন্টএন্ড স্ট্যাট ম্যানেজ টুল

npm এর সাহায্যে ইনস্টল করা

npm install zustand

yarn এর সাহায্যে ইনস্টল করা

yarn add zustand

স্টোর তৈরি করা

create()

স্টোরে ফাংশন পাস করার মাধ্যমে ইনিশিয়াল স্ট্যাট সেট করা এবং স্ট্যাট মিউটেটর ফাংশন এড করা

const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears:  0 }) })) 

স্টোর এর স্টেট পেতে (হুকের সাহায্যে )

const bears = useBearStore(state => state.bears)

স্ট্যাট মিউটেটর ফাংশন এক্সেস করা

const removeAllBears = useBearStore(state => state.removeAllBears); removeAllBears();

Middleware এপলাই করতে স্টোরে, স্টোরের পাসকৃত ফাংশন কে middlware এর ফাংশন wrapper দিয়ে wrap করে দিতে হয়। For example: (আমরা যদি রিডাক্স এর ডেভটুল ইউজ করতে চাই যুস্ট্যান্ড এর জন্য তখন আমরা middleware ইউজ করব এভাবে)

create(devtools((set) => ({})));

স্টোরের সবকিছু নিয়ে আসা

const state = useBearStore()

সিলেক্টিং মাল্টিপল স্টেট স্লাইস

const nuts = useBearStore((state) => state.nuts); const honey = useBearStore((state) => state.honey)

স্টেট কে মার্জ না করে পুরো পরিবর্তন করে ফেলতে চাইলে মিউটেশনের set ফাংশনে আপনার সেকেন্ড প্যারামিটার পাস করতে হবে এভাবে

() => set({}, true), // clears the entire store, actions included

Async একশন

fetch: async (pond) => { const response = await fetch(pond) set({ fishies:  await response.json() }) },

মেমোইজিং ( স্টোরিং ) সিলেক্টরস

const fruit = useStore(useCallback((state) => state.fruits[id], [id]))

একশনের ভিতর স্টেট থেকে রিড করা

const useStore = create((set, get) => ({ sound: 'grunt', action: () => { const sound = get().sound;} })

রিয়েক্ট ছাড়া যুস্ট্যান্ড ইউজ করা

import create from 'zustand/vanilla'; const store = create(() => ({ ... }));const { getState, setState, subscribe, destroy } = store

immer এর সাথে যুস্ট্যান্ড ইউজ করা

import produce from 'immer'; const useStore = create((set) => ({  lush: {  forest: { contains: { a: 'bear' } } },  set: (fn) => set(produce(fn)), })); const set = useStore((state) => state.set); set((state) => { state.lush.forest.contains = null;})`

Mutator

স্টেট চ্যাঞ্জ করার জন্য কোন ফাংশন 

Store State

সম্পূর্ণ  এপ্লিকেশন এর  স্টেট  হোল্ড করে  

Middleware

Middleware যুস্ট্যান্ডের স্টোরে এক্সট্রা ফিচার এড করার জন্য ব্যবহৃত হয়

রিডাক্স এর ডেভটুল ইউজ করে যুস্ট্যান্ড এর স্টেট ট্রাক করার জন্য

create(devtools((set) => ({})));

যুস্ট্যান্ড এর স্টোর কে লোকাল স্টোরেজ এর সাথে sync বা persist করাতে চাইলে

create(persist((set) => ({})));

আপনি যদি রিডাক্স এর মত reducers and action types ইউজ করতে চান

const useGrumpyStore = create(redux(reducer, initialState))

বেসিক টাইপ্সক্রিপ্ট ইউজ এর জন্য

create<State>()(...)