Redux-ის სტეიტის სტრუქტურის შეცვლა

პირველი ეტაპი, რომელიც ჩვენ განვახორციელებთ ჩვენი Redux აპლიკაციის ურთიერთქმედებისთვის რაიმე გარე სერვერთან - არის მონაცემების მიღება, რომლებიც მასზე ინახება აპლიკაციის გაშვებისას. მაგრამ მანამდე მოდით, შევიტანოთ ცვლილებები ჩვენს აპლიკაციაში.

გავხსნათ ჩვენი პროდუქტების აპლიკაცია, და მასში ფაილი productsSlice.js. ყურადღება მიაქციეთ initialState-ის განსაზღვრას. თავდაპირველად ჩვენი პროდუქტების სლაისი productsSlice - ეს არის მასივი, რომელშიც არის ობიექტები (ჩვენს შემთხვევაში ორი) პროდუქტების მონაცემებით. პირველ რიგში, რადგან ახლა ჩვენ ვიღებთ მათ სერვერიდან, ჩვენ უნდა ამოვიღოთ ისინი initialState-დან. მეორე რიგში, ჩვენ ვაგზავნით სერვერზე API მოთხოვნებს და ჩვენთვის მნიშვნელოვანი იქნება მათი სტატუსის ცოდნა. ამ ორი რამის გათვალისწინებით, მოდით, გადავაკეთოთ initialState. მოდით ახლა ის იყოს უბრალოდ ობიექტი ველებით products (თავდაპირველად აქ არ იქნება რაიმე მონაცემი, უბრალოდ ცარიელი მასივი), status და error. ახლა ჩვენი კოდი initialState-ისთვის გახდება ცოტა მოკლე:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

ჯერჯერობით ჩვენ დავსეტეთ სტატუსი 'idle' (უმოქმედობა), რადგან თავდაპირველად ჩვენ არ ვაგზავნით რაიმე მოთხოვნას, მაგრამ საერთოდ ის შეიცვლება და შეიძლება მიიღოს მნიშვნელობები 'ჩატვირთვა', 'შესრულებულია', 'ჩატვირთვის შეცდომა'. გახსოვდეთ, რომ სტატუსის აღსანიშნავად თქვენ შეგიძლიათ აირჩიოთ ის სახელები, რომლებიც თქვენთვის მოსახერხებელი იქნება.

ჩამოვიდეთ ქვემოთ კოდის გასწვრივ. initialState-ის შეცვლის შემდეგ, ჩვენ უნდა შევცვალოთ ის კოდიც, რომელშიც ჩვენ ვმუშაობთ ამ სტეიტთან რედიუსერების ფუნქციებში. შევხედოთ კოდს productAdded-ისთვის:

state.push(action.payload)

ახლა ახალ პროდუქტებს ჩვენ ვაპირებთ ჩავდოთ არა უბრალოდ სტეიტში პროდუქტებისთვის, არამედ მის თვისებაში state.products. ამიტომ, შევცვალოთ ზემოთ მოცემული სტრიქონი ამით:

state.products.push(action.payload)

შესაბამისად, გავაკეთოთ იგივე ცვლილებები რედიუსერისთვის reactionClicked. ნაცვლად:

const currentProduct = state.find((product) => product.id === productId)

ახლა იქნება:

const currentProduct = state.products.find((product) => product.id === productId)

თავად შეცვალეთ state state.products-ზე რედიუსერის productUpdated კოდში.

გახსენით თქვენი აპლიკაცია სტუდენტებთან. გახსენით მასში ფაილი studentsSlice.js. მოდით ახლა თქვენს initialState-ს ჰქონდეს სამი თვისება: students, status, error - გადააკეთეთ ის, როგორც ნაჩვენებია გაკვეთილზე.

შეიტანეთ შესაბამისი ცვლილებები ქვემოთ კოდის გასწვრივ. შეცვალეთ state state.students-ზე თქვენი სამი რედიუსერის ფუნქციის კოდში.