easy peasy is an alternative of redux

easy peasy is an alternative of redux

আমাদের আমাদের গ্লোবালি ষ্টেট মেনেজ করে থাকি স্বাধারনত redux ব্যাবহার করে । কারণ আমরা রিডাক্সের সাথে অনেক আগে থেকেই পরিচিত ।

এখন আমাদের কাছে যদি এমন একটি টুল থাকত যদি সেটা নামের দিক থেকে easy peasy আবার বিহাইন্ডে রিদাক্সের সাপোর্টই দিয়ে থেকে । কেমন হত এমন কিছু পাইলে ?

অবশ্যয় ভালো হত । যদিও আমাদের API থেকে ডাটা আনার ক্ষেত্রে RTK query এঁর বিকল্প নেই । থাকলে আপাতত আমার জানা নেই । easy peasy এঁর কঞ্চেপ্ট আপনাদের সামনে আনার কারণ হচ্ছে এটা easy to use. খুব কম কোড লেখেই স্টেট ম্যানেজ করা যায় ।

আগে কিছু ব্যাবহার সম্পর্কে বেসিক কিছু বিষয় জেনে নেই । আমাদের easy peasy তে

  1. ষ্টোর তৈরি করার জন্য দরকার পরবে createStore নামে একটা ফাংশন যা আর্গুমেন্ট হিসেবে অবজেক্ট পাবে ।

  2. আমাদের reducer হল্বে এক একটা model.

  3. action তৈরি করার জন্য action ফাংশনে ষ্টেটের ভেলু এবং action function টি ইমপ্লিমেন্ট করতে হবে

তাহলে চলুন এঁর কিছু ব্যাবহার দেখে নেই ।

import { createStore, action } from "easy-peasy";

const counterModel = {
 value: 0,
 increment: action((state, payload) => {
  state.value += payload;
 }),
 decrement: action((state, payload) => {
  state.value -= payload;
 }),
};

const store = createStore({
 count: counterModel,
});
export default store
import { useStoreState, useStoreActions } from "easy-peasy";
const Count = () => {
 // hooks
 const count = useStoreState((state) => state.count);
 const counterActions = useStoreActions((actions) => actions.count);
 return (
  <div>
   <h1>value is {count.value}</h1>
   <button onclick={counterActions.increment}>increment</button>
  </div>
 );
};
export default Count;

Implementation process খুব সহজ কেও চাইলেই easy peasy ব্যাবহার করতে পারেন । easy peasy বিহাইন্ডে রেডাক্স ব্যাবহার করে থেকে । যে যে বিষয় গুলোর বআ ফিচার গুলোর alternative এঁর হিসেবে কাজ করে

Did you find this article valuable?

Support Rashedul's Article by becoming a sponsor. Any amount is appreciated!