Redux-এ বিক্রেতাদের ডেটা প্রাপ্তি

আসুন আমাদের পণ্য সহ অ্যাপ্লিকেশন চালু করি। আমরা দেখতে পাচ্ছি যে পণ্যের কার্ডে বিক্রেতাদের দেখানো হচ্ছে না। আসুন তাদের সার্ভার থেকে পাই এবং এই ডেটা প্রদর্শন করি। এর জন্য আমাদের পরিচিত ক্রমটি সম্পাদন করতে হবে।

শুরুতে server.js ফাইলটি খুলুন। handlers অ্যারে খুঁজে পেতে এবং এতে আরও একটি যোগ করুন GET-অনুরোধ প্রক্রিয়াকরণ (পণ্যের জন্য GET প্রক্রিয়াকরণের পরে)। আপনি দেখতে পাচ্ছেন এটি কার্যত অভিন্ন:

http.get('/fakeServer/sellers', async () => {
	await delay(ARTIFICIAL_DELAY_MS)
	return HttpResponse.json(db.seller.getAll())
}),

আমরা সার্ভারে অনুরোধটি প্রক্রিয়া করেছি। পরবর্তী ধাপে sellersSlice.js ফাইলে আমাদের থাঙ্ক লিখতে হবে সার্ভার থেকে ডেটা পেতে। এর জন্য এতে client এবং createAsyncThunk ইম্পোর্ট করুন:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { client } from '../../api/client'

এখন আমরা সার্ভার থেকে বিক্রেতাদের পাব, তাই তাদের initialState থেকে সরিয়ে ফেলব, শুধু খালি বন্ধনী রেখে:

const initialState = []

এবং তারপর sellersSlice ফাংশনের আগে আমাদের থাঙ্ক fetchSellers তৈরি করব। ক্লায়েন্টকে আমরা সার্ভারে উল্লেখিত পথটি পাস করব:

export const fetchSellers = createAsyncThunk(
	'sellers/fetchSellers',
	async () => {
		const response = await client.get('/fakeServer/sellers')
		return response.data
	}
)

আমাদের শুধু sellersSlice এর জন্য একটি অতিরিক্ত রিডিউসার তৈরি করতে হবে। আমরা এখানে সফল অনুরোধের প্রক্রিয়াকরণে সীমাবদ্ধ থাকব। fetchSellers দ্বারা তৈরি সমস্ত অ্যাকশন, fetchProducts এর অ্যাকশনের মতো অভিন্ন হবে:

const sellersSlice = createSlice({
	name: 'sellers',
	initialState,
	reducers: {},
	extraReducers(builder) {
		builder.addCase(fetchSellers.fulfilled, (state, action) => {
			return action.payload
		})
	},
})

আমি আপনাকে মনে করিয়ে দিচ্ছি যে শেষবার পণ্য পাওয়ার সময় আমরা বর্তমান স্টেট মান পরিবর্তন করেছি। এখানে আমরা কিছুটা ভিন্ন পথ নিয়েছি এবং শুধু একটি নতুন মান ফিরিয়েছি, createSlice এও এটি করা যায়। এভাবে আমরা দুটি লক্ষ্য অর্জন করেছি। প্রথমত, আমরা ডেটা পেয়েছি, এবং দ্বিতীয়ত, এখন আমাদের নিশ্চয়তা আছে যে বিক্রেতাদের তালিকায় অন্য কিছু দেখাবে না, কারণ আমরা সম্পূর্ণরূপে স্লাইসটিকে action.payload মান দিয়ে প্রতিস্থাপন করেছি।

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশনটি খুলুন। এতে server.js ফাইলটি খুলুন, handlers অ্যারেতে আরও একটি হ্যান্ডলার যোগ করুন শিক্ষকদের জন্য GET-অনুরোধের।

এবং এখন teachersSlice.js ফাইলটি খুলুন। initialState কে পাঠ্যে দেখানো হিসাবে একটি খালি অ্যারে করুন, studentsSlice ফাংশনের আগে থাঙ্ক লিখুন fetchTeachers।

createSlice ফাংশনে অতিরিক্ত রিডিউসার যোগ করুন, সফল অনুরোধের প্রক্রিয়াকরণে নিজেকে সীমাবদ্ধ রাখুন।