Supratimas ir viduje _ Redux Store Actions Reducers React

„Redux“ maitinamoje programoje architektūra sukasi aplink tris pagrindines sąvokas: „Redux“ store, actions, ir reducers. Pažvelkime į kiekvieną iš šių sąvokų ir pažiūrėkime, kaip jos veikia kartu.

Redux Store

Redux store yra vienintelis tiesos šaltinis, kuriame yra visa jūsų programos būsena. Iš esmės tai yra „JavaScript“ objektas, kuriame yra visos programos būsenos duomenys. Galite sukurti store naudodami createStore funkciją iš Redux bibliotekos.

Actions

Actions yra paprasti „JavaScript“ objektai, apibūdinantys tai, kas nutiko programoje. Juose yra type laukas, nurodantis atliekamo veiksmo tipą, taip pat galima įtraukti papildomų duomenų. Actions yra kuriami naudojant veiksmų kūrėjus, kurie yra funkcijos, grąžinančios veiksmo objektus. Pavyzdžiui:

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

Reducers

Reducers nurodykite, kaip keičiasi programos būsena reaguojant į actions. Reduktorius yra gryna funkcija, kuri dabartinę būseną ir veiksmą priima kaip argumentus ir grąžina naują būseną. Reducers naudojant šią funkciją, sujungiami į vieną šaknies reduktorius combineReducers. Štai paprastas pavyzdys:

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

Dirbant kartu

Kai siunčiate veiksmą naudodami dispatch funkciją, Redux persiunčia veiksmą visiems reducers. Kiekvienas reduktorius patikrina, ar veiksmo tipas atitinka jo tipą, ir atitinkamai atnaujina atitinkamą būsenos dalį. Tada atnaujinta būsena išsaugoma „Redux“ store ir visi prijungti komponentai iš naujo pateikiami pagal naują būseną.

Scenarijaus pavyzdys

Įsivaizduokite užduočių sąrašo programą. Kai vartotojas prideda naują užduotį, veiksmas išsiunčiamas su užduoties tipu ADD_TODO ir tekstu kaip naudingoji apkrova. Todos reduktorius gauna šį veiksmą, prideda naują todo būseną ir grąžina atnaujintą būseną.

Išvada

Norint efektyviai valdyti būseną, labai svarbu suprasti, kaip Redux store, actions, ir sąveikauja. reducers Ši architektūra užtikrina aiškų problemų atskyrimą ir palengvina sudėtingų programų būsenų valdymą. Toliau tobulėjant su Redux, šios koncepcijos bus jūsų valstybės valdymo strategijos pagrindas.