Ymmärtäminen ja sisään _ Redux Store Actions Reducers React

Redux-käyttöisessä sovelluksessa arkkitehtuuri pyörii kolmen pääkonseptin ympärillä: Redux store, actions, ja reducers. Tutustutaanpa jokaiseen näistä käsitteistä syvemmälle ja katsotaan kuinka ne toimivat yhdessä.

Redux Store

Redux store on yksittäinen totuuden lähde, joka sisältää sovelluksesi täydellisen tilan. Se on pohjimmiltaan JavaScript-objekti, joka sisältää tiedot, jotka edustavat koko sovelluksen tilaa. Luot store funktion createStore Redux-kirjastosta.

Actions

Actions ovat tavallisia JavaScript-objekteja, jotka kuvaavat jotain sovelluksessa tapahtunutta. Niissä on type kenttä, joka ilmaisee suoritettavan toiminnon tyypin, ja myös lisätietoja voidaan sisällyttää. Actions luodaan toimintojen luojien avulla, jotka ovat toimintoobjekteja palauttavia toimintoja. Esimerkiksi:

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

Reducers

Reducers määrittää, kuinka sovelluksen tila muuttuu vastauksena actions. Vähentäjä on puhdas funktio, joka ottaa nykyisen tilan ja toiminnon argumentteina ja palauttaa uuden tilan. Reducers yhdistetään yhdeksi juurivähentäjäksi toimintoa käyttämällä combineReducers. Tässä on yksinkertainen esimerkki:

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

Työskennellä yhdessä

Kun lähetät toiminnon käyttämällä dispatch toimintoa, Redux välittää toiminnon kaikille reducers. Kukin supistin tarkistaa, vastaako toiminnon tyyppi omaansa, ja päivittää asiaankuuluvan osan tilasta vastaavasti. Päivitetty tila tallennetaan sitten Reduxiin store, ja kaikki yhdistetyt komponentit renderöidään uudelleen uuden tilan perusteella.

Esimerkki skenaario

Kuvittele tehtäväluettelosovellus. Kun käyttäjä lisää uuden tehtävän, toiminto lähetetään ADD_TODO hyötykuormana tehtävän tyypin ja tekstin kanssa. Todos-vähentäjä vastaanottaa tämän toiminnon, lisää uuden tehtävän tilaan ja palauttaa päivitetyn tilan.

Johtopäätös

Redux store, actions, ja reducers vuorovaikutuksen ymmärtäminen on ratkaisevan tärkeää tehokkaan tilanhallinnan kannalta. Tämä arkkitehtuuri varmistaa huolenaiheiden selkeän erottelun ja helpottaa monimutkaisten sovellustilojen hallintaa. Kun jatkat kehitystäsi Reduxin kanssa, nämä konseptit muodostavat valtionhallinnon strategiasi perustan.