Skip to content

Instantly share code, notes, and snippets.

@me-shaon
Created March 18, 2018 05:21
Show Gist options
  • Save me-shaon/8ee71d65935c9f4b601bf208122ee189 to your computer and use it in GitHub Desktop.
Save me-shaon/8ee71d65935c9f4b601bf208122ee189 to your computer and use it in GitHub Desktop.
// রিডাক্স লাইব্রেরীটা থেকে আমরা শুধুমাত্র createSotre মেথডটা import করতেছি
import { createStore } from 'redux'
// এটাই হচ্ছে আমাদের Reducer ফাংশন যেটা আমরা Redux কে দিবো।
// এখানে আমরা বলে দিচ্ছি একটা state আর action দিলে পরবর্তীতে state টা চেঞ্জ
// হয়ে কি হবে। এই ফাংশনটা একটা pure function. কেন? কারণ এটাতে যেই
// প্যারামিটার গুলো দেয়া হয়, মূলত state টা, সে সরাসরি সেগুলোতে চেঞ্জ করে না,
// বরং নতুন একটা পরিবর্তিত ডাটা রিটার্ন করে। এটার কারণেই আসলে লগিং এর কাজটা
// ভালোভাবে করা যায়। যেহেতু প্রতিবার নতুন একটা state ডাটা রিটার্ন হয়, logger
// টুলস সেটাকে সেইভ করে রেখে দিতে পারে। নতুবা যদি মূল state এ চেইঞ্জ হতো
// তাহলে লগারকে আগের state এর রেফারেন্স রাখতে হতো আর লগ দেখানোর সময়
// action আর state এর মধ্যে হিসাব নিকাশ করে আগের একশনে, স্টেইটের অবস্থা
// দেখানো লাগতো।
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// এখানে আমরা আমাদের কাজের জন্য একটা Redux এর Store বানাচ্ছি, আর শুরুতেই
// তাকে বলে দিচ্ছি আমাদের Reducer ফাংশনটা কি হবে।
let store = createStore(counter)
// এখানে আমরা যেই Store টা ক্রিয়েট করেছি তাঁর subscribe মেথডে আমাদের একটা
// ফাংশন পাঠিয়ে দিচ্ছি যেটা কিনা মূলত Store এর চেইঞ্জের listener হিসেবে কাজ
// করবে। অর্থাৎ, Store এ কোনো চেইঞ্জ হলে Redux আমাদের এই মেথডটাকে কল
// করবে। তারমানে Store এ চেইঞ্জ হলে আমরা সেটার প্রেক্ষিতে কি করতে চাই, সেটা
// আমরা এখানে বলে দিতে পারি। আপাতত আমরা এখানে Store এর কি অবস্থা সেটা
// জানার জন্য getState() মেথড কল দিচ্ছি। খেয়াল করো, আগেই বলেছি আমরা
// Store এ সরাসরি কিছু চেইঞ্জ করতে পারবো না, কিন্তু আমরা Store এর অবস্থা
// কি সেটা জানতে পারবো, একারণে Redux এর Store কে Read-only বলে।
// Redux স্টোরের অবস্থা যাতে আমরা জানতে পারি সেজন্য getState() মেথডটা
// আমাদের দিয়েছে।
store.subscribe(() =>
console.log(store.getState())
)
// নীচে আমরা Store কে কিছু action পাঠাচ্ছি, যেটা দেখে, Reducer এর সাহায্য
// নিয়ে Redux তাঁর Store এ চেইঞ্জ করবে। এখানে একটা জিনিস খেয়াল রাখতে হবে,
// Action টা কি বা কেমন হবে, সেটা নিয়ে Redux এর তেমন কোনো মাথা ব্যথা নেই,
// সে শুধু ২টা জিনিস আমাদের নিশ্চিত করতে বলে। সেটা হলো, Action হিসেবে একটা
// জাভাস্ক্রিপ্ট অবজেক্ট পাঠাতে হবে, আর তাতে অবশ্যই একটা 'type' key থাকতে হবে।
// এটা ছাড়া এই অবজেক্টে আমরা অন্য key তে অন্য যে কোনো ডাটা পাঠাতে পারি। সেটা
// আপাতত এখানে দেখালাম না, পরে দেখাবো।
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment