Created
March 18, 2018 05:21
-
-
Save me-shaon/8ee71d65935c9f4b601bf208122ee189 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
// রিডাক্স লাইব্রেরীটা থেকে আমরা শুধুমাত্র 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