Redux'un temel kavramları nelerdir?

Question

Accepted Answer

**Redux**, üç temel ilkeye dayanan öngörülebilir bir durum konteynerıdır: **tek bir store**, **salt okunur durum** yalnızca **actionlar** aracılığıyla değiştirilir ve **saf reducers** sonraki durumu hesaplar. Veriler tek bir yönde akış gösterir, bu da değişikliklerin izlenebilir olmasını sağlar. ## Üç ilke ```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 ``` ## Parçalar ve akış ```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; ``` ## Döngü ```text UI dispatches an ACTION → REDUCER computes new STATE → STORE updates → subscribed components re-render → user interacts → dispatches the next action ``` Bu sıkı tek yönlü akış, her durum değişikliğinin gönderilen bir action'ın saf bir fonksiyon tarafından işlenmesinin sonucu olduğu anlamına gelir — tamamen izlenebilir. ## React'te kullanımı ```jsx import { useSelector, useDispatch } from "react-redux"; function Counter() { const count = useSelector(state => state.counter.value); // read const dispatch = useDispatch(); return ; // write } ``` ## Neden kısıtlamalar? ```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 ``` (Not: modern Redux **Redux Toolkit** kullanır, bu da bu kavramları korurken boilerplate'i dramatik olarak azaltır.) ## Neden önemli Redux'un temel kavramları — tek store, actionlar, saf reducers, tek yönlü akış — uygulama durumunu **öngörülebilir ve izlenebilir** hale getirerek, büyük uygulamalar için ana değerini oluşturur. store/action/reducer/dispatch/select'i anlamak, Redux kullanan birçok kod tabanı için gereklidir ve ilkeler (değişmez güncellemeler, saf reducerler, tek yönlü akış) hemen hemen her durum kütüphanesinde tekrar görülür. Dengeleme noktası boilerplate'tir ve Redux Toolkit bunu bu temellemeleri korurken çözer.