Porozumění a v _ Redux Store Actions Reducers React

V aplikacích využívajících Redux se architektura točí kolem tří hlavních konceptů: Redux store, actions a reducers. Pojďme se hlouběji ponořit do každého z těchto konceptů a podívat se, jak spolu fungují.

Redux Store

Redux store je jediný zdroj pravdy, který obsahuje úplný stav vaší aplikace. Je to v podstatě objekt JavaScriptu, který obsahuje data představující celý stav aplikace. Vytvoříte store pomocí createStore funkce z knihovny Redux.

Actions

Actions jsou prosté objekty JavaScriptu, které popisují něco, co se stalo v aplikaci. Nesou type pole, které označuje typ prováděné akce, a mohou být zahrnuta i další data. Actions jsou vytvářeny pomocí tvůrců akcí, což jsou funkce, které vracejí akční objekty. Například:

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

Reducers

Reducers určit, jak se změní stav aplikace v reakci na actions. Reduktor je čistá funkce, která bere aktuální stav a akci jako argumenty a vrací nový stav. Reducers jsou sloučeny do jednoho kořenového reduktoru pomocí combineReducers funkce. Zde je jednoduchý příklad:

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

Pracovat spolu

Když odešlete akci pomocí dispatch funkce, Redux předá akci všem reducers. Každý reduktor zkontroluje, zda se typ akce shoduje s jeho vlastním, a podle toho aktualizuje příslušnou část stavu. Aktualizovaný stav se pak uloží do Redux store a všechny připojené komponenty se znovu vykreslí na základě nového stavu.

Příklad scénáře

Představte si aplikaci se seznamem úkolů. Když uživatel přidá nový úkol, odešle se akce s typem ADD_TODO a textem úkolu jako užitečného zatížení. Reduktor úkolů tuto akci přijme, přidá nový úkol do stavu a vrátí aktualizovaný stav.

Závěr

Pochopení toho, jak Redux store, actions, a reducers interagují, je zásadní pro efektivní řízení státu. Tato architektura zajišťuje jasné oddělení zájmů a usnadňuje správu složitých stavů aplikací. Jak budete pokračovat ve vývoji s Redux, tyto koncepty budou tvořit základ vaší strategie řízení státu.