გაგება და ში _ Redux Store Actions Reducers React

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

Redux Store

Redux store არის ჭეშმარიტების ერთი წყარო, რომელიც შეიცავს თქვენი განაცხადის სრულ მდგომარეობას. ეს არსებითად არის JavaScript ობიექტი, რომელიც შეიცავს მონაცემებს, რომლებიც წარმოადგენს აპლიკაციის მთლიან მდგომარეობას. თქვენ ქმნით ფუნქციის store გამოყენებით createStore Redux ბიბლიოთეკიდან.

Actions

Actions არის უბრალო JavaScript ობიექტები, რომლებიც აღწერს იმას, რაც მოხდა აპლიკაციაში. ისინი ატარებენ type ველს, რომელიც მიუთითებს განხორციელებული მოქმედების ტიპზე და ასევე შეიძლება ჩაერთოს დამატებითი მონაცემები. Actions იქმნება ქმედების შემქმნელების გამოყენებით, ეს არის ფუნქციები, რომლებიც აბრუნებენ მოქმედების ობიექტებს. Მაგალითად:

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};  

Reducers

Reducers მიუთითეთ როგორ იცვლება აპლიკაციის მდგომარეობა საპასუხოდ actions. რედუქტორი არის სუფთა ფუნქცია, რომელიც იღებს მიმდინარე მდგომარეობას და მოქმედებას არგუმენტებად და აბრუნებს ახალ მდგომარეობას. Reducers ფუნქციის გამოყენებით გაერთიანებულია ერთ ფესვის რედუქტორში combineReducers. აი მარტივი მაგალითი:

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});  

Ერთად მუშაობა

როდესაც თქვენ აგზავნით მოქმედებას dispatch ფუნქციის გამოყენებით, Redux გადასცემს მოქმედებას ყველა reducers. თითოეული რედუქტორი ამოწმებს ემთხვევა თუ არა მოქმედების ტიპს მის ტიპს და შესაბამისად განაახლებს მდგომარეობის შესაბამის ნაწილს. განახლებული მდგომარეობა შემდეგ ინახება Redux-ში store და ნებისმიერი დაკავშირებული კომპონენტი ხელახლა ხდება ახალი მდგომარეობის საფუძველზე.

მაგალითი სცენარი

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

დასკვნა

იმის გაგება, თუ როგორ ურთიერთქმედებენ Redux store, გადამწყვეტია ეფექტური სახელმწიფო მართვისთვის. ეს არქიტექტურა უზრუნველყოფს პრობლემების მკაფიო გამიჯვნას და აადვილებს აპლიკაციის რთული მდგომარეობების მართვას. როდესაც თქვენ განაგრძობთ განვითარებას Redux-თან ერთად, ეს კონცეფციები გახდება თქვენი სახელმწიფო მართვის სტრატეგიის საფუძველი. actions reducers