Razumevanje in v _ Redux Store Actions Reducers React

V aplikaciji, ki jo poganja Redux, se arhitektura vrti okoli treh glavnih konceptov: Redux store, actions, in reducers. Poglobimo se v vsakega od teh konceptov in poglejmo, kako delujejo skupaj.

Redux Store

Redux store je en sam vir resnice, ki vsebuje celotno stanje vaše aplikacije. To je v bistvu objekt JavaScript, ki vsebuje podatke, ki predstavljajo celotno stanje aplikacije. Ustvarite z store uporabo createStore funkcije iz knjižnice Redux.

Actions

Actions so navadni objekti JavaScript, ki opisujejo nekaj, kar se je zgodilo v aplikaciji. Imajo type polje, ki označuje vrsto dejanja, ki se izvaja, lahko pa so vključeni tudi dodatni podatki. Actions se ustvarijo z ustvarjalci dejanj, ki so funkcije, ki vrnejo objekte dejanj. Na primer:

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

Reducers

Reducers določite, kako se stanje aplikacije spremeni kot odziv na actions. Reduktor je čista funkcija, ki vzame trenutno stanje in dejanje kot argumenta ter vrne novo stanje. Reducers so z uporabo funkcije združeni v en korenski reduktor combineReducers. Tukaj je preprost primer:

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

Delati skupaj

Ko odpošljete dejanje s dispatch funkcijo, Redux posreduje dejanje vsem reducers. Vsak reduktor preveri, ali se tip dejanja ujema z njegovim, in ustrezno posodobi ustrezni del stanja. Posodobljeno stanje se nato shrani v Redux store in vse povezane komponente se ponovno upodobijo na podlagi novega stanja.

Primer scenarija

Predstavljajte si aplikacijo za seznam opravil. Ko uporabnik doda novo opravilo, je dejanje poslano z vrsto ADD_TODO in besedilom opravila kot koristnim. Reduktor opravil sprejme to dejanje, doda novo opravilo stanju in vrne posodobljeno stanje.

Zaključek

Razumevanje medsebojnega delovanja Redux store, actions, in reducers je ključnega pomena za učinkovito upravljanje stanja. Ta arhitektura zagotavlja jasno ločevanje zadev in olajša upravljanje zapletenih stanj aplikacije. Ko boste nadaljevali z razvojem z Reduxom, bodo ti koncepti tvorili temelj vaše strategije upravljanja stanja.