Apakah konsep asas Redux?

Question

Accepted Answer

**Redux** adalah bekas keadaan yang dapat diramalkan yang dibangun atas tiga prinsip asas: **satu store**, keadaan **baca sahaja** yang hanya dapat diubah melalui **actions**, dan **pure reducers** yang mengira keadaan seterusnya. Data mengalir satu arah, membuat perubahan dapat dilacak. ## Tiga prinsip ```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 ``` ## Bahagian dan aliran ```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; ``` ## Kitaran ```text UI dispatches an ACTION → REDUCER computes new STATE → STORE updates → subscribed components re-render → user interacts → dispatches the next action ``` Aliran satu arah yang ketat ini bermakna setiap perubahan keadaan adalah hasil daripada action yang dihantar yang diproses oleh fungsi tulen — dapat dilacak sepenuhnya. ## Menggunakannya dalam React ```jsx import { useSelector, useDispatch } from "react-redux"; function Counter() { const count = useSelector(state => state.counter.value); // read const dispatch = useDispatch(); return ; // write } ``` ## Mengapa kekangan ini? ```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 ``` (Catatan: Redux moden menggunakan **Redux Toolkit**, yang mengurangkan boilerplate secara drastik sambil mempertahankan konsep ini.) ## Mengapa ia penting Konsep asas Redux — satu store, actions, pure reducers, aliran satu arah — membuat keadaan aplikasi **dapat diramalkan dan dapat dilacak**, yang merupakan nilai utamanya untuk aplikasi besar. Memahami store/action/reducer/dispatch/select adalah penting untuk banyak codebase yang menggunakan Redux, dan prinsip (kemas kini yang tidak berubah, pure reducers, aliran satu arah) berulang dalam hampir setiap perpustakaan keadaan. Tukar ganti ialah boilerplate, yang Redux Toolkit tangani sambil mengekalkan asas ini.