X'inhuma l-kunċetti bażiċi ta' Redux?

Question

Accepted Answer

**Redux** hija kontenitur ta' stat prevedibli mibnija fuq tliet prinċipji fundamentali: **stor wieħed**, stat **read-only** li jista' jinbidel biss permezz ta' **actions**, u **pure reducers** li jikkalkulaw l-istat li jmiss. Id-data jifla f'direzzjoni waħda, ix-xanges siru trakċjabbli. ## It-tliet prinċipji ```text 1. Single source of truth — the whole app's state lives in ONE store object 2. State is read-only — you never mutate it; you DISPATCH actions to change it 3. Changes via pure reducers — (state, action) => newState, no side effects ``` ## L-elementi u l-fluss ```js // STORE — holds the single state tree const store = configureStore({ reducer: rootReducer }); // ACTION — a plain object describing what happened const action = { type: "counter/incremented", payload: 1 }; // REDUCER — pure function: given state + action, returns NEW state function counterReducer(state = { value: 0 }, action) { switch (action.type) { case "counter/incremented": return { ...state, value: state.value + action.payload }; // new object default: return state; } } // DISPATCH — the only way to trigger a change store.dispatch(action); // SELECT — read state store.getState().counter.value; ``` ## Iċ-ċiklu ```text UI dispatches an ACTION → REDUCER computes new STATE → STORE updates → subscribed components re-render → user interacts → dispatches the next action ``` Il-fluss unidirezzjonali stratt dan ifisser li kull tibdil ta' stat huwa r-riżultat ta' action dispatched ipproċessat minn funzjoni pura — trakċjabbli kompletament. ## L-użu tiegħu f'React ```jsx import { useSelector, useDispatch } from "react-redux"; function Counter() { const count = useSelector(state => state.counter.value); // read const dispatch = useDispatch(); return ; // write } ``` ## Għaliex il-limitazzjonijiet? ```text Predictability — every change is an explicit, logged action Debuggability — time-travel debugging, action replay (Redux DevTools) Testability — pure reducers are trivial to unit test ``` (Nota: Redux modern juża **Redux Toolkit**, li titnaqqas ħafna l-boilerplate filwaqt li toħloq dawn il-kunċetti.) ## Għaliex importanti Il-kunċetti bażiċi ta' Redux — stor wieħed, actions, pure reducers, fluss unidirezzjonali — jagħmlu stat tal-applikazzjoni **prevedibli u trakċjabbli**, li hija l-valur prinċipali tiegħu għal apps kbar. L-għarfien ta' store/action/reducer/dispatch/select hux essenzjali għal ħafna codebases li jużaw Redux, u l-prinċipji (aġġornamenti immutable, pure reducers, fluss unidirezzjonali) jirrepetu fid-daqq kull librerija ta' stat. It-trade-off huwa boilerplate, li Redux Toolkit taġbora filwaqt li tħassar dawn il-fondamenti.