Redux: pattern ng pamamahala ng estado sa React Native
Redux — isang predictable na lalagyan ng pamamahala ng estado para sa mga JavaScript application, na nilikha ni Dan Abramov noong 2015. Ang Redux ay nagpapatupad ng unidirectional na daloy ng data batay sa arkitektura ng Flux: ang estado ay nakaimbak sa iisang Store, binabago lamang sa pamamagitan ng purong Reducer function, at pinapasimulan sa pamamagitan ng Action na may Dispatch. Ayon sa datos ng npm Trends, ang Redux ay nagpapanatili ng higit sa 7 milyong lingguhang pag-download, nananatiling pamantayan para sa pamamahala ng estado sa React Native at mga web application.
Mga Pangunahing Punto
- Store — ang tanging pinagmumulan ng katotohanan, nag-iimbak ng buong puno ng estado ng application
- Action — bagay na may field na type, naglalarawan ng intensyon na baguhin ang estado
- Reducer — purong function (prevState, action) => newState na walang side effects
- Dispatch — paraan ng Store para magpadala ng Action sa Reducer
- Middleware — sapin sa pagitan ng dispatch at reducer para sa mga asynchronous na operasyon at pag-log
Ano ang Redux?
Redux — isang pattern ng arkitektura at aklatan para sa pamamahala ng estado, batay sa tatlong prinsipyo: iisang pinagmumulan ng katotohanan (single source of truth), estado na nababasa lamang (read-only), at mga pagbabago sa pamamagitan ng purong function. Hindi tulad ng MVC kung saan ang modelo ay maaaring magbago ng estado nang hindi nahuhulaan, ginagarantiya ng Redux ang determinismo: sa parehong input data, ang resulta ay palaging pareho.
Ang Redux ay inspirasyon ng arkitektura ng Flux mula sa Facebook at ng wikang Elm. Ang pangunahing pagkakaiba mula sa Flux — iisang Store sa halip na marami. Sa Redux, ang buong estado ng application — mga bagay, array, flag ng pag-load — ay nakaimbak sa isang puno. Pinapasimple nito ang debugging, pagsubok, at pagpapanumbalik ng estado (time-travel debugging). Maaaring i-save ng developer ang buong Store, kopyahin ang pagkakasunod-sunod ng Action, at makita kung paano nagbago ang estado sa bawat hakbang.
Ayon sa datos ng State of JS 2025, 68% ng mga respondent na gumagamit ng pamamahala ng estado ay pumipili ng Redux o Redux Toolkit. Ang kasangkapan ay sinusuportahan ng lahat ng modernong framework: React, React Native, Angular, Vue, at kahit purong JavaScript na walang framework.
Unidirectional na daloy ng data
Unidirectional data flow — ang pangunahing prinsipyo ng Redux, kung saan ang data ay gumagalaw nang mahigpit sa isang direksyon: View → Action → Dispatch → Reducer → Store → View. Walang component ang maaaring direktang magbago ng Store. Ang View ay nag-subscribe lamang sa mga pagbabago sa pamamagitan ng useSelector o connect at pinapasimulan ang mga pagbabago sa pamamagitan ng dispatch.
Siklo ng trabaho ng Redux: pinindot ng user ang isang button → tinatawag ng component ang dispatch({ type: 'INCREMENT' }) → inihahatid ng Store ang Action sa Root Reducer → kinakalkula ng Reducer ang bagong estado → inaabisuhan ng Store ang mga subscriber → muling iginuhit ang View gamit ang bagong data. Ginagarantiya ng siklong ito na ang bawat pagbabago ay may malinaw na dahilan sa anyo ng isang partikular na Action.
DevTools — ang built-in na kasangkapan ng Redux para sa pagsubaybay sa bawat Action, estado ng Store, at oras ng pagpapatupad. Nakikita ng developer ang listahan ng lahat ng na-dispatch na Action, pagkakaiba ng estado (diff) bago at pagkatapos, at maaaring bumalik sa anumang nakaraang estado. Ginagawa nitong sampung beses na mas mabilis ang debugging ng mga kumplikadong estado kumpara sa ordinaryong pag-log.
Mga pangunahing bahagi ng Redux
Store — bagay na naglalaman ng buong puno ng estado. Ginagawa sa pamamagitan ng configureStore (RTK) o createStore. Ang Store ay nagbibigay ng tatlong paraan: getState() para sa pagbasa, dispatch(action) para sa pagbabago, at subscribe(listener) para sa pag-subscribe. Sa Redux Toolkit, ang Store ay mayroon nang middleware, DevTools, at suporta para sa slice.
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 at Action Creator — ang Action ay isang bagay na may mandatoryong field na type (string constant) at opsyonal na payload (data). Ang Action Creator — function na nagbabalik ng Action. Sa Redux Toolkit, ginagamit ang createAction para sa pagbuo ng Action na may awtomatikong pag-type.
Reducer — purong function na tumatanggap ng kasalukuyang estado at Action, nagbabalik ng bagong estado. Ang Reducer ay hindi dapat: mag-mutate ng state (nagbabalik ng bagong bagay), tumawag ng API, lumikha ng random na numero, o um-access ng Date. Ang immutability ay ginagarantiyahan ng spread operator ... o Immer (built-in sa RTK).
| Component | Pananagutan | Mga Limitasyon |
|---|---|---|
| Store | Pag-iimbak ng estado, dispatch, subscribe | Isa bawat application |
| Action | Paglalarawan ng intensyon na baguhin ang estado | Dapat may type |
| Reducer | Pagkalkula ng bagong estado | Purong function, walang side effects |
| Dispatch | Pagpapadala ng Action sa Reducer | Synchronous bilang default |
| Selector | Pagkuha ng data mula sa Store | Memoization sa pamamagitan ng createSelector |
Middleware at Redux Thunk
Middleware — isang kadena ng mga function na ipinapasok sa pagitan ng tawag ng dispatch at ng sandaling maabot ng Action ang Reducer. Ang bawat middleware ay tumatanggap ng Store API at maaaring mag-log, magbago, maantala, o kanselahin ang Action. Redux Thunk — karaniwang middleware para sa mga asynchronous na operasyon, na nagpapahintulot sa pag-dispatch ng mga function sa halip na mga bagay.
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()
}
)Sikat na middleware: Redux Thunk — para sa simpleng asynchronous na tawag, Redux Saga — para sa kumplikadong senaryo na may saga-generator (debounce, race, parallel na kahilingan), Redux Observable — batay sa RxJS para sa reactive stream. Sa Redux Toolkit, ang middleware ay ikinokonekta sa pamamagitan ng parameter na middleware sa configureStore.
Ayon sa survey ng State of JS 2025, ang Thunk ay ginagamit sa 72% ng mga proyektong Redux, Saga — sa 18%, Observable — sa 5%. Para sa karamihan ng mga application, sapat na ang kombinasyon ng Thunk + RTK Query upang masakop ang 95% ng mga senaryo ng asynchronous na trabaho gamit ang data.
Redux Toolkit at RTK Query
Redux Toolkit (RTK) — ang opisyal, inirerekomendang paraan ng pagsulat ng Redux logic, na inilabas noong 2019. Ang RTK ay may kasamang configureStore, createSlice, createAsyncThunk, at createEntityAdapter, na binabawasan ang boilerplate code ng Redux ng 60-70%. Sa halip na manu-manong gumawa ng Action Creator, Reducer, at mga uri, ginagamit ang isang 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 — ang built-in na solusyon para sa pagtatrabaho sa API batay sa Redux Toolkit. Nagbibigay-daan sa deklaratibong pagtukoy ng endpoint sa pamamagitan ng createApi na may awtomatikong pagbuo ng hook, caching, pag-invalidate ng tag, at optimistikong pag-update. Pinapalitan ng RTK Query ang manu-manong pagsulat ng Thunk, Reducer, at Selector para sa bawat kahilingan ng API.
Entity Adapter — ang utility na createEntityAdapter para sa normalisasyon ng mga koleksyon ng entity. Nagbibigay ng built-in na CRUD reducer, selector, at pag-uuri para sa mga array ng bagay. Kung ang Store ay nag-iimbak ng mga listahan ng user, produkto, o order — binabawasan ng Entity Adapter ang reduction code ng 80%.
Redux sa React Native
React Native Redux — ang karaniwang kombinasyon para sa mga mobile application sa JavaScript. Ang Redux ay isinasama sa pamamagitan ng Provider mula sa react-redux na bumabalot sa root component ng application. Ang mga hook na useSelector at useDispatch ay nagbibigay sa mga component ng access sa estado nang walang props drilling. Persist — redux-persist ay nag-iimbak ng Store sa AsyncStorage o MMKV, pinapanumbalik ang estado pagkatapos ng pag-restart ng application.
Middleware para sa React Native: redux-flipper para sa debugging sa pamamagitan ng Flipper, redux-observable para sa reactive stream na may native na driver, react-native-mmkv para sa mabilis na persistent storage. Ang navigation plugin na redux-first-router ay nag-uugnay ng mga screen sa Store, na nagpapahintulot sa pagpapanumbalik ng estado ng screen kapag bumalik.
Sa React Native, ang Redux ay ginagamit kasama ng network-first na estratehiya: ang application ay unang sumusubok na mag-load ng data mula sa server, pagkatapos ay ini-cache ito sa Store sa pamamagitan ng RTK Query o redux-persist. Ang offline mode ay nakakamit sa pamamagitan ng kombinasyon ng Redux + NetInfo + pila ng Action para sa muling pagpapadala kapag naibalik ang koneksyon.
Mga Madalas na Itanong
Ano ang pagkakaiba ng Redux sa Context API sa React?
Redux — isang kumpletong solusyon na may Store, DevTools, Middleware, at immutable na estado. Context API — built-in na mekanismo ng React para sa paghahatid ng data nang walang props drilling. Ang Context ay angkop para sa pandaigdigang tema at lokalisasyon, Redux — para sa kumplikadong estado na may asynchronous na operasyon, caching, at debugging. Sa malalaking application, ang Context ay nagdudulot ng hindi kinakailangang re-render, nilulutas ng Redux na may selector ang problemang ito.
Ano ang Immer sa Redux Toolkit?
Immer — isang aklatan para sa immutable na pagtatrabaho sa estado, built-in sa Redux Toolkit. Pinapayagan ng Immer ang pagsulat ng reducer na parang direktang minu-mutate ang state: state.value += 1. Sa ilalim ng hood, gumagawa ang Immer ng proxy object (draft), sinusubaybayan ang mga pagbabago, at nagbabalik ng bagong immutable na bagay. Binabawasan nito ang dami ng code ng reducer ng 50% at inaalis ang aksidenteng mutasyon.
Paano i-test ang Redux?
Ang Redux logic ay sinusuri nang nakahiwalay: Reducer — purong function, sapat na tawagan ito gamit ang iba't ibang Action at suriin ang resulta. Action Creator — suriin ang ibinalik na bagay. Thunk — i-mock ang API, tawagan ang dispatch at suriin kung anong Action ang naipadala. Component na may useSelector — gamitin ang Provider na may test Store sa renderer. Redux DevTools ay tumutulong sa pagsulat ng test sa pamamagitan ng pagkopya ng pagkakasunod-sunod ng Action mula sa isang tunay na session.
Kailan gagamitin ang Redux sa halip na useState?
useState ay sapat para sa lokal na estado ng isang component: teksto ng field, bukas/sarado na modal. Redux ay kailangan kapag ang estado ay ibinabahagi sa maraming screen, nangangailangan ng asynchronous na synchronization (data mula sa server), dapat panatilihin sa pagitan ng pag-restart ng application (persist), o nangangailangan ng time-travel debugging. Para sa maliliit na application, ang Redux ay labis — gamitin ang Context + useReducer.
Ano ang normalize sa Redux?
Normalizr — isang aklatan para sa normalisasyon ng nested data sa flat na istraktura ng Store. Sa halip na mag-imbak ng malalim na bagay tulad ng user.posts[0].comments, ang normalisasyon ay gumagawa ng mga diksyunaryo: entities.users, entities.posts, entities.comments na may mga sanggunian ayon sa ID. Pinapasimple nito ang pag-update ng isang entity sa lahat ng lugar at pinapabilis ang mga selector. Inirerekomenda ng Redux Toolkit ang na-normalize na data para sa kumplikadong modelo.
Buod
- Redux — predictable na lalagyan ng estado na may iisang Store at purong Reducer
- Action — bagay na may type, Reducer — purong function, Dispatch — mekanismo ng pagpapadala
- Redux Toolkit — opisyal na API na may createSlice, createAsyncThunk, at RTK Query
- Middleware — sapin para sa asynchrony: Thunk, Saga, Observable
- React Native ay isinasama sa pamamagitan ng Provider, useSelector, at redux-persist para sa offline mode
- DevTools — time-travel debugging na may pagkopya ng bawat Action
- Normalizr — normalisasyon ng data para sa mahusay na selector at pag-update
Gagawa kami ng mobile application na turnkey
Gumagawa ang IT Sectr ng mga iOS at Android application para sa mga startup at negosyo mula noong 2017. Magpapayo kami sa iyo at magmumungkahi ng pinakamahusay na solusyon.
Basahin din