Redux: образац управљања стањем у React Native-у
Redux — предвидиви контејнер за управљање стањем за JavaScript апликације, креиран од стране Дена Абрамова 2015. године. Redux имплементира једносмерни ток података заснован на архитектури Flux: стање се чува у јединственом Store-у, мења се само кроз чисте функције Reducer и покреће се кроз Action са Dispatch-ом. Према подацима npm Trends, Redux задржава преко 7 милиона недељних преузимања, остајући стандард за управљање стањем у React Native-у и веб апликацијама.
Главно
- Store — једини извор истине, који чува цело стабло стања апликације
- Action — објекат са пољем type, који описује намеру да се промени стање
- Reducer — чиста функција (prevState, action) => newState без споредних ефеката
- Dispatch — метода Store-а за слање Action-а у Reducer
- Middleware — међуслој између dispatch-а и reducer-а за асинхроне операције и логирање
Шта је Redux?
Redux — архитектонски образац и библиотека за управљање стањем, заснован на три принципа: једини извор истине (single source of truth), стање само за читање (read-only) и промене кроз чисте функције. За разлику од MVC-а, где модел може да мења стање на непредвидив начин, Redux гарантује детерминизам: са истим улазним подацима резултат је увек исти.
Redux је инспирисан архитектуром Flux компаније Facebook и језиком Elm. Главна разлика у односу на Flux — јединствени Store уместо више њих. У Redux-у, целокупно стање апликације — објекти, низови, заставице учитавања — чува се у једном стаблу. То поједностављује отклањање грешака, тестирање и враћање стања (time-travel debugging). Програмер може да сачува цео Store, репродукује секвенцу Action-а и види како се стање мењало на сваком кораку.
Према подацима State of JS 2025, 68% испитаника који користе управљање стањем бирају Redux или Redux Toolkit. Алат подржавају сви модерни оквири: React, React Native, Angular, Vue, па чак и чисти JavaScript без оквира.
Једносмерни ток података
Unidirectional data flow — кључни принцип Redux-а, где се подаци крећу строго у једном смеру: View → Action → Dispatch → Reducer → Store → View. Ниједна компонента не може директно да промени Store. View се само претплаћује на промене кроз useSelector или connect и покреће промене кроз dispatch.
Циклус рада Redux-а: корисник притиска дугме → компонента позива dispatch({ type: 'INCREMENT' }) → Store прослеђује Action у Root Reducer → Reducer израчунава ново стање → Store обавештава претплатнике → View се поново исцртава са новим подацима. Овај циклус гарантује да свака промена има експлицитан узрок у облику конкретног Action-а.
DevTools — уграђени алат Redux-а за праћење сваког Action-а, стања Store-а и времена извршења. Програмер види листу свих послатих Action-а, разлику стања (diff) пре и после, и може да се врати на било које претходно стање. То чини отклањање грешака сложених стања десетинама пута бржим у поређењу са обичним логирањем.
Кључне компоненте Redux-а
Store — објекат који садржи цело стабло стања. Креира се кроз configureStore (RTK) или createStore. Store пружа три методе: getState() за читање, dispatch(action) за измену и subscribe(listener) за претплату. У Redux Toolkit-у, Store већ укључује middleware, DevTools и подршку за слајсове.
TypeScript
import { configureStore } from '@reduxjs/toolkit'
interface CounterState {
value: number
}
const initialState: CounterState = { value: 0 }
function counterReducer(
state = initialState,
action: { type: string }
): CounterState {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 }
default:
return state
}
}
const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }Action и Action Creator — Action је објекат са обавезним пољем type (константни стринг) и опционим payload (подаци). Action Creator — функција која враћа Action. У Redux Toolkit-у се користи createAction за генерисање Action-а са аутоматском типизацијом.
Reducer — чиста функција која прима тренутно стање и Action, враћајући ново стање. Reducer не сме: да мутира state (враћа се нови објекат), да позива API, генерише насумичне бројеве или приступа Date-у. Непроменљивост се обезбеђује spread оператором ... или Immer-ом (уграђен у RTK).
| Компонента | Задужење | Ограничења |
|---|---|---|
| Store | Чување стања, dispatch, subscribe | Један по апликацији |
| Action | Опис намере да се промени стање | Мора имати type |
| Reducer | Израчунавање новог стања | Чиста функција, без споредних ефеката |
| Dispatch | Слање Action-а у Reducer | Синхроно подразумевано |
| Selector | Издвајање података из Store-а | Мемоизација кроз createSelector |
Middleware и Redux Thunk
Middleware — ланац функција уметнутих између позива dispatch-а и тренутка када Action стиже до Reducer-а. Сваки middleware добија API Store-а и може да логира, мења, одлаже или отказује Action. Redux Thunk — стандардни middleware за асинхроне операције, који омогућава да се dispatch-ују функције уместо објеката.
JavaScript
import { createAsyncThunk } from '@reduxjs/toolkit'
export const fetchUser = createAsyncThunk(
'users/fetchById',
async (userId: number, { rejectWithValue }) => {
const response = await fetch(`/api/users/${userId}`)
if (!response.ok)
return rejectWithValue('Failed to fetch')
return await response.json()
}
)Популарни middleware: Redux Thunk — за једноставне асинхроне позиве, Redux Saga — за сложене сценарије са сагама-генераторима (debounce, race, паралелни захтеви), Redux Observable — заснован на RxJS-у за реактивне токове. У Redux Toolkit-у, middleware се повезује кроз параметар middleware у configureStore.
Према анкети State of JS 2025, Thunk се користи у 72% Redux пројеката, Saga — у 18%, Observable — у 5%. За већину апликација, комбинација Thunk + RTK Query је довољна да покрије 95% сценарија асинхроног рада са подацима.
Redux Toolkit и RTK Query
Redux Toolkit (RTK) — званични, препоручени начин писања Redux логике, објављен 2019. године. RTK укључује configureStore, createSlice, createAsyncThunk и createEntityAdapter, смањујући boilerplate код Redux-а за 60-70%. Уместо ручног креирања Action Creator-а, Reducer-а и типова, користи се један createSlice.
TypeScript
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) { state.value += 1 },
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload
}
}
})
export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducerRTK Query — уграђено решење за рад са API-јем засновано на Redux Toolkit-у. Омогућава декларативно дефинисање ендпоинта кроз createApi са аутоматским генерисањем хук-ова, кеширањем, инвалидацијом ознака и оптимистичким ажурирањима. RTK Query замењује ручно писање Thunk-а, Reducer-а и Selector-а за сваки API захтев.
Entity Adapter — алат createEntityAdapter за нормализацију колекција ентитета. Пружа уграђене CRUD редукторе, селекторе и сортирање за низове објеката. Ако се у Store-у чувају листе корисника, производа или поруџбина — Entity Adapter смањује код редукције за 80%.
Redux у React Native-у
React Native Redux — стандардна комбинација за мобилне апликације у JavaScript-у. Redux се интегрише кроз Provider из react-redux-а, који обавија корену компоненту апликације. Хукови useSelector и useDispatch дају компонентама приступ стању без props drilling-а. Persist — redux-persist чува Store у AsyncStorage-у или MMKV-у, враћајући стање након поновног покретања апликације.
Middleware за React Native: redux-flipper за отклањање грешака кроз Flipper, redux-observable за реактивне токове са изворним драјверима, react-native-mmkv за брзо трајно складиштење. Навигациони прикључак redux-first-router повезује екране са Store-ом, омогућавајући враћање стања екрана при повратку.
У React Native-у, Redux се користи заједно са стратегијом network-first: апликација прво покушава да учита податке са сервера, затим их кешира у Store-у кроз RTK Query или redux-persist. Офлајн режим се постиже комбинацијом Redux + NetInfo + реда Action-а за поновно слање при успостављању везе.
Често постављана питања
Чиме се Redux разликује од Context API-ја у React-у?
Redux — потпуно решење са Store-ом, DevTools-ом, Middleware-ом и непроменљивим стањем. Context API — уграђени механизам React-а за пренос података без props drilling-а. Context је погодан за глобалне теме и локализацију, Redux — за сложено стање са асинхроним операцијама, кеширањем и отклањањем грешака. У великим апликацијама, Context изазива непотребна поновна исцртавања, Redux са селекторима решава овај проблем.
Шта је Immer у Redux Toolkit-у?
Immer — библиотека за непроменљив рад са стањем, уграђена у Redux Toolkit. Immer омогућава писање редуктора као да директно мутирате state: state.value += 1. Испод хаубе, Immer креира прокси објекат (draft), прати промене и враћа нови непроменљиви објекат. То смањује обим кода редуктора за 50% и елиминише случајне мутације.
Како тестирати Redux?
Redux логика се тестира изоловано: Reducer — чиста функција, довољно је позвати је са различитим Action-има и проверити резултат. Action Creator — проверити враћени објекат. Thunk — измоковати API, позвати dispatch и проверити који Action-и су послати. Компонента са useSelector-ом — користити Provider са тестним Store-ом у рендереру. Redux DevTools помажу да се напише тест репродуковањем секвенце Action-а из стварне сесије.
Када користити Redux уместо useState-а?
useState је довољан за локално стање једне компоненте: текст поља, отворен/затворен модал. Redux је потребан када се стање дели између многих екрана, захтева асинхрону синхронизацију (подаци са сервера), треба да се сачува између поновних покретања апликације (persist) или захтева time-travel отклањање грешака. За мале апликације, Redux је прекомеран — користите Context + useReducer.
Шта је normalize у Redux-у?
Normalizr — библиотека за нормализацију угнежђених података у равну структуру Store-а. Уместо чувања дубоких објеката типа user.posts[0].comments, нормализација креира речнике: entities.users, entities.posts, entities.comments са референцама по ID-ју. То поједностављује ажурирање једног ентитета на свим местима и убрзава селекторе. Redux Toolkit препоручује нормализоване податке за сложене моделе.
Завршни закључци
- Redux — предвидиви контејнер стања са јединственим Store-ом и чистим Reducer-има
- Action — објекат са type-ом, Reducer — чиста функција, Dispatch — механизам слања
- Redux Toolkit — званични API са createSlice, createAsyncThunk и RTK Query
- Middleware — међуслој за асинхроност: Thunk, Saga, Observable
- React Native се интегрише кроз Provider, useSelector и redux-persist за офлајн режим
- DevTools — time-travel отклањање грешака са репродукцијом сваког Action-а
- Normalizr — нормализација података за ефикасне селекторе и ажурирања
Развићемо мобилну апликацију под кључ
IT Sectr креира iOS и Android апликације за стартапе и предузећа од 2017. године. Саветоваћемо вас и предложити најбоље решење.
Прочитајте такође