Zrozumienie i w _ Redux Store Actions Reducers React

W aplikacji opartej na Redux architektura opiera się na trzech głównych koncepcjach: Redux store, actions i reducers. Przyjrzyjmy się bliżej każdej z tych koncepcji i zobaczmy, jak ze sobą współdziałają.

Redux Store

Redux store to pojedyncze źródło prawdy, które przechowuje pełny stan Twojej aplikacji. Zasadniczo jest to obiekt JavaScript zawierający dane reprezentujące cały stan aplikacji. Tworzysz store za pomocą createStore funkcji z biblioteki Redux.

Actions

Actions to zwykłe obiekty JavaScript, które opisują coś, co wydarzyło się w aplikacji. Zawierają type pole wskazujące rodzaj wykonywanej akcji, a także mogą zawierać dodatkowe dane. Actions są tworzone przy użyciu kreatorów akcji, czyli funkcji zwracających obiekty akcji. Na przykład:

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

Reducers

Reducers określić, jak zmienia się stan aplikacji w odpowiedzi na actions. Reduktor to czysta funkcja, która przyjmuje bieżący stan i akcję jako argumenty i zwraca nowy stan. Reducers są łączone w jeden reduktor pierwiastkowy za pomocą combineReducers funkcji. Oto prosty przykład:

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

Pracować razem

Kiedy wysyłasz akcję za pomocą tej dispatch funkcji, Redux przekazuje akcję do wszystkich reducers. Każdy reduktor sprawdza, czy typ akcji odpowiada swojemu i odpowiednio aktualizuje odpowiednią część stanu. Zaktualizowany stan jest następnie przechowywany w Redux store, a wszystkie podłączone komponenty są ponownie renderowane w oparciu o nowy stan.

Przykładowy scenariusz

Wyobraź sobie aplikację z listą rzeczy do zrobienia. Gdy użytkownik doda nowe zadanie do wykonania, wywoływana jest akcja z typem ADD_TODO i tekstem zadania jako ładunkiem. Reduktor zadań otrzymuje tę akcję, dodaje nowe zadanie do stanu i zwraca zaktualizowany stan.

Wniosek

Zrozumienie, w jaki sposób Redux store, actions i reducers współdziałają, jest kluczowe dla skutecznego zarządzania stanem. Architektura ta zapewnia wyraźne oddzielenie problemów i ułatwia zarządzanie złożonymi stanami aplikacji. W miarę dalszego rozwoju z Redux koncepcje te staną się podstawą Twojej strategii zarządzania stanem.