Megértés és be _ Redux Store Actions Reducers React

A Redux-alapú alkalmazásokban az architektúra három fő koncepció körül forog: a Redux store, actions, és reducers. Nézzünk mélyebbre az egyes fogalmakba, és nézzük meg, hogyan működnek együtt.

Redux Store

A Redux store az igazság egyetlen forrása, amely az alkalmazás teljes állapotát tartalmazza. Lényegében egy JavaScript objektum, amely az alkalmazás teljes állapotát reprezentáló adatokat tartalmazza. store A createStore függvényt a Redux könyvtárból hozhatja létre .

Actions

Actions egyszerű JavaScript objektumok, amelyek leírnak valamit, ami az alkalmazásban történt. Egy mezőt tartalmaznak type, amely jelzi a végrehajtott művelet típusát, és további adatok is megadhatók. Actions A műveletkészítők használatával jönnek létre, amelyek olyan függvények, amelyek műveletobjektumokat adnak vissza. Például:

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

Reducers

Reducers adja meg, hogy az alkalmazás állapota hogyan változik a következőre válaszul actions. A reduktor egy tiszta függvény, amely az aktuális állapotot és egy műveletet veszi argumentumként, és új állapotot ad vissza. Reducers a funkció segítségével egyetlen gyökércsökkentővé egyesítik combineReducers. Íme egy egyszerű példa:

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

Együtt dolgozni

Amikor elküld egy műveletet a dispatch függvény használatával, a Redux továbbítja a műveletet az összes reducers. Minden reduktor ellenőrzi, hogy a művelet típusa megegyezik-e a sajátjával, és ennek megfelelően frissíti az állapot megfelelő részét. A frissített állapotot ezután a Redux tárolja store, és a csatlakoztatott összetevők az új állapot alapján újra megjelennek.

Példa forgatókönyv

Képzeljen el egy teendőlista alkalmazást. Amikor egy felhasználó új teendőt ad hozzá, egy műveletet küld a ADD_TODO teendő típusával és szövegével hasznos teherként. A todos reduktor megkapja ezt a műveletet, hozzáadja az új teendőt az állapothoz, és visszaadja a frissített állapotot.

Következtetés

store A Redux, actions, és interakciójának megértése reducers elengedhetetlen a hatékony állapotkezeléshez. Ez az architektúra biztosítja a problémák egyértelmű szétválasztását, és megkönnyíti az összetett alkalmazási állapotok kezelését. Ahogy a Redux-szal tovább fejlődik, ezek a koncepciók képezik az államirányítási stratégiájának alapját.