Redux ના મુખ્ય ખ્યાલો શું છે?

Question

Accepted Answer

**Redux** એક અનુમાનિત સ્થિતિ કન્ટેનર છે જે ત્રણ મુખ્ય સિદ્ધાંતો પર બનેલ છે: એક **એકલો store**, **માત્ર વાંચી શકાય તેવી સ્થિતિ** જે ફક્ત **actions** દ્વારા બદલાય છે, અને **શુદ્ધ reducers** જે આગલી સ્થિતિ ગણતરી કરે છે. ડેટા એક જ દિશામાં વહે છે, જે પરિવર્તનોને ટ્રેસ કરી શકાય તેવું બનાવે છે। ## ત્રણ સિદ્ધાંતો ```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 ``` ## ભાગો અને પ્રવાહ ```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; ``` ## ચક્ર ```text UI dispatches an ACTION → REDUCER computes new STATE → STORE updates → subscribed components re-render → user interacts → dispatches the next action ``` યો કઠોર એક-માર્ગ પ્રવાહ એ અર્થ રાખે છે કે દરેક સ્થિતિ પરિવર્તન એ શુદ્ધ ફંક્શન દ્વારા પ્રક્રિયા કરાયેલ ડિસ્પેચ કરાયેલ action નું પરિણામ છે — સંપૂર્ણ રીતે ટ્રેસ કરી શકાય તેવું। ## તેને React માં ઉપયોગ કરવું ```jsx import { useSelector, useDispatch } from "react-redux"; function Counter() { const count = useSelector(state => state.counter.value); // read const dispatch = useDispatch(); return ; // write } ``` ## કેમ આ મર્યાદાઓ? ```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 ``` (નોટ: આધુનિક Redux **Redux Toolkit** ને વાપરે છે, જે આ ખ્યાલોને જાળવી રાખતા હુબેહુ બોઇલરપ્લેટ ઘટાડે છે.) ## શા માટે તેનું મહત્ત્વ છે Redux ના મુખ્ય ખ્યાલો — એકલો store, actions, શુદ્ધ reducers, એક-માર્ગ પ્રવાહ — application state **અનુમાનિત અને ટ્રેસ કરી શકાય તેવો** બનાવે છે, જે મોટી apps માટે તેનું મુખ્ય મૂલ્ય છે। store/action/reducer/dispatch/select સમજવું Redux ને વાપરતા ઘણા codebases માટે આવશ્યક છે, અને સિદ્ધાંતો (અપરિવર્તનશીલ અપડેટ્સ, શુદ્ધ reducers, એક-દિશીય પ્રવાહ) લગભગ દરેક state library માં પુનરાવર્તિત થાય છે। ટ્રેડ-ઓફ બોઇલરપ્લેટ છે, જે Redux Toolkit આ મૂળભૂત સિદ્ધાંતોને સાચવતા હલ કરે છે।