Sobes.tech
Middle

Jaké populární přístupy byly vyvinuty pro použití Reduxu?

sobes.tech AI

Odpověď od AI

  • Vanilla Redux: Základní přístup s createStore, běžnými akcemi, reduktory a selektory. Vyžaduje hodně boilerplate kódu.
  • Redux Toolkit: Doporučený přístup. Zjednodušuje konfiguraci a práci s Redux pomocí utilit jako configureStore, createSlice, createAsyncThunk. Snižuje množství boilerplate kódu.
  • Redukory s Immer: Použití knihovny Immer uvnitř reducerů umožňuje přímo mutovat stav v "náčrtu" a Immer vygeneruje nový, neměnný stav. Zjednodušuje logiku reducerů.
  • Ducks: Strukturovaný přístup, kde jsou reduktory, akce a typy akcí pro konkrétní funkci nebo modul seskupeny v jednom souboru. Zlepšuje čitelnost a údržbu.
// Příklad struktury 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ární přístup: Strukturování Redux logiky podle funkcí nebo modulů, kde každý modul má své vlastní reduktory, akce a selektory, často s použitím Redux Toolkit a hooků useSelector/useDispatch.
  • Redux-Saga/Redux-Thunk pro side-effecty: Použití middleware pro správu asynchronních operací. Redux-Thunk pro jednoduché asynchronní akce (např. fetch), Redux-Saga pro složitější scénáře (konkurence, zrušení, zpoždění).
// Pří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 });
    }
  };
};
  • Normalizace stavu (Normalizr): Při práci s vnořenými a propojenými daty pomáhá normalizace zabránit duplicitám a usnadňuje aktualizace.