জাস্টেন্ড - একটি সিম্পল হুক বেজড স্টেট ম্যানেজমেন্ট লাইব্রেরি

খুবই সহজ, সুন্দর এবং সিম্পল একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি হলো জাস্টেন্ড। থাকছে না রিডাক্স এর মতো বয়লারপ্লেটিং করার এবং কন্টেক্সট এপিআই এর মতো প্রোভাইডারের মধ্যে আপনার অ্যাপ্লিকেশানকে র‍্যাপ করার মতো ঝামেলা। এবং মাত্র ১.৬৭ কেবি সাইজের এই লাইব্রেরিটি আমাদের দিচ্ছে অসাধারণ কিছু সুবিধা। তো চলুন দেখে নেওয়া যাক কিভাবে ইউজ করতে হবে জাস্টেন্ড আপনার রিয়েক্ট অ্যাপ্লিকেশানে এবং একটি সহজ কাউন্টার অ্যাপ কিভাবে বানানো যায়।

ইন্সটালেশন

আপনার পছন্দের প্যাকেজ ম্যানেজার থেকে প্রথমে zustand ইন্সটল করে নিবেন।

npm install zustand
yarn add zustand

স্টোর ক্রিয়েশন

আমাদের রিয়েক্ট অ্যাপ্লিকেশানে আমরা একটি ফাইল বানিয়ে নিবো useCounter.js নামে। এবং আমরা জাস্টেন্ড এর create ফাংশন কল করে একটি স্টোর বানিয়ে নিবো আমাদের স্টেট রাখার জন্য।

import create from 'zustand';

const useCounter = create(() => ({
  count: 0
}));

export default useCounter

এবং আমাদের App.js এ আমরা useCounter হুকটা কল করে সেটা থেকে count এর ডাটাগুলো নিয়ে সেটা রেন্ডার করবো।

import React from 'react';
import './App.css';
import useCounter from './useCounter';

function App() {
  const count = useCounter(state => state.count);
  return (
    

এতোটুকু কোড করার পর আমাদের ব্রাউজারে নিচের আউটপুটটি দেখতে পাবোঃ

কাউন্ট এর আউটপুট

কাউন্টার ভ্যালু আপডেট

শুধু স্টেট এর ভ্যালু দেখালেই তো হবে না তাই না? আপডেটও তো করতে হবে। সেটা আমরা ক্রিয়েট এর মধ্যে set ফাংশন ইউজ করে খুব সহজেই করে ফেলতে পারি।

const useCounter = create((set) => ({
  count: 0,
  increaseCount: () => set(state => ({count: state.count + 1})),
  decreaseCount: () => set(state => ({count: state.count - 1})),
}));

আমরা App.js এ increase এবং decrease ফাংশনটা কল করবো এবং বাটনের onClick ইভেন্টে কাজ করাবো।

function App() {
  const count = useCounter(state => state.count);
  const increaseCount = useCounter(state => state.increaseCount);
  const decreaseCount = useCounter(state => state.decreaseCount);
  return (
    

এই কোডটুকু করার পর আমরা ব্রাউজারে গিয়ে বাটনগুলো ক্লিক করার পর দেখতে পাবো আমাদের কাউন্টারটি ভালোভাবেই কাজ করছে।

Increase এবং decrease বাটন

আমরা চাইলে useCounter হুকটা যেকোনো কম্পোনেন্ট এ কল করে count এর ভ্যালু ডিস্প্লে করতে পারি।

Github Link: https://github.com/pmndrs/zustand