Middleware jinsab bejn dispatch ta' action u l-action li jilħaq ir-reducer, u jippermettilok li tintercept actions biex tittratta side effects (async API calls, logging) — li r-reducers ma jistgħux jagħmlu għax għandhom jibqgħu pure. Thunks huma l-middleware l-aktar komuni, li jippermettilok logika async.
dispatch(action) → [ middleware 1 → middleware 2 → ... ] → reducer → store
(can inspect, modify, delay, or stop actions; do side effects)
Il-middleware iwaddal dispatch, għalhekk kull action jgħaddi minnu qabel jilħaq ir-reducers. Dan huwa l-post imdaqqaq għas-side effects li r-reducers jinqaffu.
// reducers are pure → can't do this. Plain actions are just objects → can't either.
async function loadUsers() {
const users = await fetch("/api/users").then(r => r.json()); // a SIDE EFFECT
// ...need to dispatch the result into the store
}
Int teħtieġ post fejn tagħmel async work (fetch) u mbagħad dispatch ir-riżultat. Middleware thunk jippermettilok dispatch function minflok object sempliċi.
// a "thunk" is a function (dispatch, getState) => { ... } doing async work
function fetchUsers() {
return async (dispatch, getState) => {
dispatch({ type: "users/loading" }); // 1. signal loading
try {
const users = await api.getUsers(); // 2. async side effect
dispatch({ type: "users/loaded", payload: users }); // 3. dispatch the result
} catch (err) {
dispatch({ type: "users/error", payload: err.message }); // 4. handle errors
}
};
}
// thunk middleware sees a FUNCTION was dispatched and calls it with dispatch/getState
store.dispatch(fetchUsers());
Il-thunk jagħmel async work u dispatch plain actions (loading/loaded/error) f'kull stadju — iżomm ir-reducers pure filwaqt li s-side effect jibqa' fir-thunk.
✓ Logging every action, analytics, crash reporting
✓ Redux Toolkit includes thunk by default + createAsyncThunk for less boilerplate
Alternatives for complex async flows: redux-saga (generators), redux-observable (RxJS)
Middleware huwa l-mod li Redux ittratta kollox li r-reducers ma jistgħux jagħmlu — partikolarment async side effects — filwaqt li żżomm il-purità li tagħmel ir-reducers prevedibili u ttestabbli.
Thunks huma l-mod standard u faċli biex tagħmel async (naqra data, dispatch loading/success/error actions).
L-għarfien tal-pipeline middleware u l-pattern thunk huwa essenzjali għal apps Redux veri, għax bħala praktika kollha jeħtieġu jgħabbru data; createAsyncThunk ta' RTK huwa mibni eżattament fuq dan.