Razumijevanje, i u Redux Store Actions Reducers React

U aplikaciji koju pokreće Redux, arhitektura se vrti oko tri glavna koncepta: Redux store, actions, i reducers. Zaronimo dublje u svaki od ovih koncepata i vidimo kako funkcioniraju zajedno.

Redux Store

Redux store je jedinstveni izvor istine koji sadrži potpuno stanje vaše aplikacije. To je u biti JavaScript objekt koji sadrži podatke koji predstavljaju cijelo stanje aplikacije. Kreirate store pomoću createStore funkcije iz Redux biblioteke.

Actions

Actions su obični JavaScript objekti koji opisuju nešto što se dogodilo u aplikaciji. Nose type polje koje označava vrstu radnje koja se izvodi, a mogu se uključiti i dodatni podaci. Actions stvaraju se pomoću kreatora radnji, a to su funkcije koje vraćaju objekte radnji. Na primjer:

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

Reducers

Reducers odredite kako se stanje aplikacije mijenja kao odgovor na actions. Reduktor je čista funkcija koja uzima trenutno stanje i akciju kao argumente i vraća novo stanje. Reducers kombiniraju se u jedan root reduktor pomoću combineReducers funkcije. Evo jednostavnog primjera:

// 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  
});  

Raditi zajedno

Kada pošaljete radnju pomoću dispatch funkcije, Redux prosljeđuje radnju svim reducers. Svaki reduktor provjerava podudara li se tip radnje s njegovim i ažurira odgovarajući dio stanja u skladu s tim. Ažurirano stanje se zatim pohranjuje u Redux store, a sve povezane komponente ponovno se prikazuju na temelju novog stanja.

Primjer scenarija

Zamislite aplikaciju popisa obveza. Kada korisnik doda novi zadatak, radnja se šalje s vrstom ADD_TODO i tekstom zadataka kao korisnim sadržajem. Reduktor zadataka prima ovu radnju, dodaje novi zadatak stanju i vraća ažurirano stanje.

Zaključak

Razumijevanje interakcije Redux store, actions, i reducers ključno je za učinkovito upravljanje stanjem. Ova arhitektura osigurava jasno odvajanje problema i olakšava upravljanje složenim stanjima aplikacije. Kako budete nastavili razvijati s Reduxom, ovi će koncepti činiti temelj vaše strategije upravljanja stanjem.