Sobes.tech
Middle

Aké populárne prístupy boli vyvinuté na použitie Redux?

sobes.tech AI

Odpoveď od AI

  • Vanilla Redux: Základný prístup s createStore, bežnými akciami, reducermi a selektormi. Vyžaduje veľa boilerplate kódu.
  • Redux Toolkit: Odporúčaný prístup. Zjednodušuje konfiguráciu a prácu s Redux pomocou utilít ako configureStore, createSlice, createAsyncThunk. Znižuje množstvo boilerplate.
  • Reducer s Immer: Použitie knižnice Immer v reduceroch umožňuje priamo mutovať stav v "náčrte", a Immer generuje nový, nemenný stav. Zjednodušuje logiku reducerov.
  • Ducks: Štruktúrovaný prístup, kde sú reducere, akcie a typy akcií pre konkrétnu funkciu alebo modul zoskupené v jednom súbore. Zlepšuje čitateľnosť a údržbu.
// Príklad štruktúry Ducks
// myFeature.js

const initialState = {
  // ...
};

const MY_FEATURE_ACTION = 'myFeature/MY_FEATURE_ACTION';

export default function myFeatureReducer(state = initialState, action) {
  // ...
}

export const myFeatureActionCreator = (payload) => ({
  type: MY_FEATURE_ACTION,
  payload,
});
  • Modulárny prístup: Štruktúrovanie Redux logiky podľa funkcií alebo modulov, kde každý modul má svoje reducere, akcie a selektory, často s použitím Redux Toolkit a hookov useSelector/useDispatch.
  • Redux-Saga/Redux-Thunk pre side-effecty: Použitie middleware na správu asynchrónnych operácií. Redux-Thunk pre jednoduché asynchrónne akcie (napr. fetch), Redux-Saga pre zložitejšie scenáre (konkurencia, zrušenie, oneskorenie).
// Príklad Redux-Thunk
const fetchData = () => {
  return async (dispatch) => {
    try {
      dispatch({ type: 'FETCH_START' });
      const response = await fetch('/api/data');
      const data = await response.json();
      dispatch({ type: 'FETCH_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_FAILURE', payload: error.message });
    }
  };
};
  • Normalizácia stavu (Normalizr): Pri práci s zanořenými a prepojenými dátami pomáha normalizácia predchádzať duplikácii a uľahčuje aktualizácie.