Raw Redux Start Without Payload/ With Payload
৫টি ধাপ
📌 ধাপ-1. Action Identifier
যে টাইপের action হবে তাকে একটা variable এর মধ্যে রাখা সুবিধাজনক। মনে রাখতে হবে এটা কিন্তু action না। action হচ্ছে একটা ফাংশন। সে return করবে একটা Object. আর Object এর 2 টা property থাকবে।
- type
- payload
এই type property-এর অবশ্যই একটা ভ্যালু থাকবে। এই ভ্যালুটাকেই আমারা আগে থেকে একটা variable এর মধ্যে রাখবো। variable এর মধ্যে না রাখলেও সমস্যা নেই। তবে রাখাটা সুবিধাজনক।
📌 ধাপ-2. Action/ Action Handler/ Action Creator
এটা হচ্ছে মূল action. এটাকে Action/ Action Handler/ Action Creator বলা যায়। এটা হবে একটা function. এই ফাংশনটি return করবে একটা Object.
এই Object এর আবার 2 টা Property থাকবে।
- type (এই type Property-র ভ্যালু হবে Action Identifier)
- payload (এই payload-র ভ্যালু হবে action ফাংশনটি আর্গুমেন্টে যা রিসিভ করবে সেই আর্গুমেন্টর নাম )
📌 ধাপ-3. Initial State অথবা State
এটা হচ্ছে state. কিন্তু state সর্বদা পরিবর্তনশীল। মানে এই state পরিবর্তন করার জন্যইতো redux. এখন state বিভিন্ন সময় বিভিন্ন অবস্থায় থাকবে। তাই একেবারে সর্বপ্রথর state কেমন ছিলো সেটা আমাদের জানা দরকার। তাই শুরুতে state কেমন/কত/কি ছিলো সেটা বলে দিতে হবে। এই শুরুর state বলা হয় initial state.
📌 ধাপ-4. Reducer
এই মুরুব্বি খুবই খতরনাক। কারণ এর মধ্যে তরকারি কষানো হবে। ইনি হচ্ছে একটা ফাংশন। তবে তিনি আর্গুমেন্ট হিসেবে ২ টা জিনিস নিবেন।
- প্রথমটা হচ্ছে state অর্থাৎ initial state
- দ্বিতীয়টা হচ্ছে action
বাকি ব্যাপারগুল Project এর মধ্যে দেখা যাবে
📌 ধাপ-5. Store
ইনি একদম সহজ সরল। শুধু reducer-কে ইনার মধ্যে ভরে দিতে হবে।
বি:দ্র: ছোট বড় যেকোন Project-এ এই ৫টি ধাপ থাকবে থাকবেই।
এই store এর ৩টি মেথড আছে। তবে এই মেথডগুলো কম বা বেশি হতে পারে। মানে হচ্ছে যদি শুধু Raw Redux হয় তাহলে এগুলো থাকবে আর অন্য কোন প্যাকেজ/ লাইব্রেরির ক্ষেত্রে এগুলো পরিবর্তন হবে। এবং সেই পরিবর্তনগুলো আরো সহজ ও সুবিধজনক।
-
5.a subscribe(), যারা subscibe করবে তাদের state পরিবর্তন হবে
-
5.b getState(), state এর পরিবর্তন দেখার জন্য
-
5.c dispatch() ইনিও যেকোন Project-এর সাথে থাকবেই থাকবে।
কোন একটা ঘটনা ঘটানোই হচ্ছে dispatch করা।
উপরে ধাপ-2 এর কথা মনে আছে? বলেছিলাম Action/ Action Handler/ Action Creator হচ্ছে একটা ফাংশন। আর আমরা জানি ফাংশনকে কল করতে হয় তা নাহলে সেতো কাজই করবে না। এই dispatch() মেথডের মধ্যে action কে ভরে কল করতে হয়।
কোড
Without Payload
// ধাপ-1: Action Identifier
const INCREMENT = "increment";
const DECREMENT = "decrement";
// ধাপ-2: Action / Action Creator (payload ছাড়া)
const incrementCounter = () => {
return {
type: INCREMENT,
};
};
const decrementCounter = () => {
return {
type: DECREMENT,
};
};
// ধাপ-3: Initial State
const initialState = {
value: 0,
};
// ধাপ-4: Reducer
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case INCREMENT:
return {
...state,
value: state.value + 1,
};
case DECREMENT:
return {
...state,
value: state.value - 1,
};
default:
return state;
}
};
// ধাপ-5: Store
import { createStore } from "redux";
const store = createStore(counterReducer);
// 5.a subscribe() + 5.b getState()
store.subscribe(() => {
console.log(store.getState());
});
// 5.c dispatch()
store.dispatch(incrementCounter());
store.dispatch(incrementCounter());
store.dispatch(decrementCounter());