close

Κατανόηση και μέσα _ 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 και τυχόν συνδεδεμένα στοιχεία αποδίδονται ξανά με βάση τη νέα κατάσταση.

Παράδειγμα Σεναρίου

Φανταστείτε μια εφαρμογή λίστας εργασιών. Όταν ένας χρήστης προσθέτει μια νέα εργασία, αποστέλλεται μια ενέργεια με τον τύπο ADD_TODO και το κείμενο της εργασίας ως ωφέλιμο φορτίο. Ο μειωτής εκκρεμοτήτων λαμβάνει αυτήν την ενέργεια, προσθέτει τη νέα εκκρεμότητα στην κατάσταση και επιστρέφει την ενημερωμένη κατάσταση.

συμπέρασμα

Η κατανόηση του τρόπου με τον οποίο το Redux store, actions, και reducers αλληλεπιδρούν είναι ζωτικής σημασίας για την αποτελεσματική διαχείριση του κράτους. Αυτή η αρχιτεκτονική εξασφαλίζει σαφή διαχωρισμό των ανησυχιών και καθιστά εύκολη τη διαχείριση πολύπλοκων καταστάσεων εφαρμογής. Καθώς συνεχίζετε να αναπτύσσεστε με το Redux, αυτές οι έννοιες θα αποτελέσουν το θεμέλιο της στρατηγικής διαχείρισης του κράτους σας.