Redux: mönster för tillståndshantering i React Native
Redux — en förutsägbar container för tillståndshantering för JavaScript-applikationer, skapad av Dan Abramov 2015. Redux implementerar ett enkelriktat dataflöde baserat på Flux-arkitekturen: tillstånd lagras i en enda Store, ändras endast genom rena Reducer-funktioner och initieras via Action med Dispatch. Enligt npm Trends behåller Redux över 7 miljoner veckovisa nedladdningar och förblir standarden för tillståndshantering i React Native och webbapplikationer.
Huvudpunkter
- Store — den enda källan till sanning, som lagrar hela tillståndsträdet för applikationen
- Action — objekt med fältet type, som beskriver avsikten att ändra tillstånd
- Reducer — ren funktion (prevState, action) => newState utan bieffekter
- Dispatch — Stores metod för att skicka Action till Reducer
- Middleware — mellanlager mellan dispatch och reducer för asynkrona operationer och loggning
Vad är Redux?
Redux — ett arkitekturmönster och bibliotek för tillståndshantering, baserat på tre principer: enda källan till sanning (single source of truth), skrivskyddat tillstånd (read-only) och förändringar genom rena funktioner. Till skillnad från MVC, där modellen kan ändra tillstånd oförutsägbart, garanterar Redux determinism: med samma indata är resultatet alltid detsamma.
Redux inspirerades av Flux-arkitekturen från Facebook och språket Elm. Huvudskillnaden från Flux — en enda Store istället för flera. I Redux lagras hela applikationstillståndet — objekt, arrayer, laddningsflaggor — i ett enda träd. Detta förenklar felsökning, testning och återställning av tillstånd (time-travel debugging). Utvecklaren kan spara hela Store, återskapa Action-sekvensen och se hur tillståndet ändrades vid varje steg.
Enligt State of JS 2025 väljer 68% av respondenterna som använder tillståndshantering Redux eller Redux Toolkit. Verktyget stöds av alla moderna ramverk: React, React Native, Angular, Vue och till och med ren JavaScript utan ramverk.
Enkelriktat dataflöde
Unidirectional data flow — den centrala principen i Redux, där data rör sig strikt i en riktning: View → Action → Dispatch → Reducer → Store → View. Ingen komponent kan direkt ändra Store. View prenumererar endast på förändringar via useSelector eller connect och initierar förändringar via dispatch.
Redux arbetscykel: användaren trycker på en knapp → komponenten anropar dispatch({ type: 'INCREMENT' }) → Store skickar Action till Root Reducer → Reducer beräknar nytt tillstånd → Store meddelar prenumeranter → View ritas om med ny data. Denna cykel garanterar att varje förändring har en tydlig orsak i form av en specifik Action.
DevTools — Redux inbyggda verktyg för att övervaka varje Action, Stores tillstånd och exekveringstid. Utvecklaren ser en lista över alla skickade Actions, skillnaden i tillstånd (diff) före och efter, och kan återgå till vilket tidigare tillstånd som helst. Detta gör felsökning av komplexa tillstånd tiotals gånger snabbare jämfört med vanlig loggning.
Nyckelkomponenter i Redux
Store — objekt som innehåller hela tillståndsträdet. Skapas via configureStore (RTK) eller createStore. Store tillhandahåller tre metoder: getState() för läsning, dispatch(action) för ändring och subscribe(listener) för prenumeration. I Redux Toolkit innehåller Store redan middleware, DevTools och stöd för slices.
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 och Action Creator — Action är ett objekt med det obligatoriska fältet type (strängkonstant) och valfritt payload (data). Action Creator — funktion som returnerar en Action. I Redux Toolkit används createAction för att generera Action med automatisk typning.
Reducer — ren funktion som tar emot aktuellt tillstånd och Action och returnerar ett nytt tillstånd. Reducer får inte: mutera state (returnerar nytt objekt), anropa API, generera slumpmässiga tal eller komma åt Date. Oföränderlighet säkerställs av spreadoperatorn ... eller Immer (inbyggt i RTK).
| Komponent | Ansvar | Begränsningar |
|---|---|---|
| Store | Lagring av tillstånd, dispatch, subscribe | En per applikation |
| Action | Beskrivning av avsikt att ändra tillstånd | Måste ha type |
| Reducer | Beräkning av nytt tillstånd | Ren funktion, utan bieffekter |
| Dispatch | Skicka Action till Reducer | Synkron som standard |
| Selector | Extrahera data från Store | Memoisering via createSelector |
Middleware och Redux Thunk
Middleware — en kedja av funktioner som placeras mellan dispatch-anropet och när Action når Reducer. Varje middleware får Store API och kan logga, modifiera, fördröja eller annullera Action. Redux Thunk — standard middleware för asynkrona operationer, som tillåter dispatch av funktioner istället för objekt.
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()
}
)Populära middleware: Redux Thunk — för enkla asynkrona anrop, Redux Saga — för komplexa scenarier med saga-generatorer (debounce, race, parallella förfrågningar), Redux Observable — baserat på RxJS för reaktiva strömmar. I Redux Toolkit ansluts middleware via parametern middleware i configureStore.
Enligt State of JS 2025-undersökningen används Thunk i 72% av Redux-projekten, Saga i 18%, Observable i 5%. För de flesta applikationer räcker kombinationen Thunk + RTK Query för att täcka 95% av scenarierna för asynkron datahantering.
Redux Toolkit och RTK Query
Redux Toolkit (RTK) — det officiella, rekommenderade sättet att skriva Redux-logik, släppt 2019. RTK inkluderar configureStore, createSlice, createAsyncThunk och createEntityAdapter, vilket minskar Redux boilerplate-koden med 60-70%. Istället för att manuellt skapa Action Creator, Reducer och typer används en enda 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 — den inbyggda lösningen för att arbeta med API baserat på Redux Toolkit. Tillåter deklarativ definition av endpoints via createApi med automatisk hook-generering, cachning, tagg-invalidering och optimistiska uppdateringar. RTK Query ersätter manuell skrivning av Thunk, Reducer och Selector för varje API-förfrågan.
Entity Adapter — verktyget createEntityAdapter för normalisering av entitetssamlingar. Tillhandahåller inbyggda CRUD-reducers, selectorer och sortering för objektarrayer. Om Store lagrar listor över användare, produkter eller beställningar — minskar Entity Adapter reduktionskoden med 80%.
Redux i React Native
React Native Redux — standardkombinationen för mobilapplikationer i JavaScript. Redux integreras via Provider från react-redux som omsluter applikationens rotkomponent. Hooksen useSelector och useDispatch ger komponenter tillgång till tillstånd utan props drilling. Persist — redux-persist sparar Store i AsyncStorage eller MMKV och återställer tillståndet efter omstart av applikationen.
Middleware för React Native: redux-flipper för felsökning via Flipper, redux-observable för reaktiva strömmar med native-drivrutiner, react-native-mmkv för snabb beständig lagring. Navigationspluginet redux-first-router kopplar skärmar till Store, vilket möjliggör återställning av skärmtillstånd vid återgång.
I React Native används Redux tillsammans med network-first-strategin: applikationen försöker först ladda data från servern, cachar sedan i Store via RTK Query eller redux-persist. Offline-läge uppnås genom en kombination av Redux + NetInfo + Action-kö för återsändning när anslutningen återställs.
Vanliga frågor
Vad är skillnaden mellan Redux och Context API i React?
Redux — en fullständig lösning med Store, DevTools, Middleware och oföränderligt tillstånd. Context API — Reacts inbyggda mekanism för dataöverföring utan props drilling. Context passar för globala teman och lokalisering, Redux — för komplext tillstånd med asynkrona operationer, cachning och felsökning. I stora applikationer orsakar Context onödiga omrenderingar, Redux med selectorer löser detta problem.
Vad är Immer i Redux Toolkit?
Immer — ett bibliotek för oföränderlig hantering av tillstånd, inbyggt i Redux Toolkit. Immer gör det möjligt att skriva reducers som om du direkt muterar state: state.value += 1. Under huven skapar Immer ett proxy-objekt (draft), spårar ändringar och returnerar ett nytt oföränderligt objekt. Detta minskar mängden reducer-kod med 50% och eliminerar oavsiktliga mutationer.
Hur testar man Redux?
Redux-logik testas isolerat: Reducer — ren funktion, det räcker att anropa den med olika Actions och kontrollera resultatet. Action Creator — kontrollera det returnerade objektet. Thunk — mocka API, anropa dispatch och kontrollera vilka Actions som skickades. Komponent med useSelector — använd Provider med test-Store i renderaren. Redux DevTools hjälper till att skriva ett test genom att återskapa Action-sekvensen från en verklig session.
När ska man använda Redux istället för useState?
useState räcker för lokalt tillstånd för en komponent: fälttext, öppen/stängd modal. Redux behövs när tillstånd delas mellan många skärmar, kräver asynkron synkronisering (data från server), måste bevaras mellan omstarter av applikationen (persist) eller kräver time-travel felsökning. För små applikationer är Redux överdrivet — använd Context + useReducer.
Vad är normalize i Redux?
Normalizr — ett bibliotek för normalisering av nästlade data till en platt Store-struktur. Istället för att lagra djupa objekt som user.posts[0].comments skapar normalisering ordböcker: entities.users, entities.posts, entities.comments med referenser per ID. Detta förenklar uppdatering av en entitet på alla platser och snabbar upp selectorer. Redux Toolkit rekommenderar normaliserad data för komplexa modeller.
Sammanfattning
- Redux — förutsägbar tillståndscontainer med en enda Store och rena Reducers
- Action — objekt med type, Reducer — ren funktion, Dispatch — sändningsmekanism
- Redux Toolkit — officiellt API med createSlice, createAsyncThunk och RTK Query
- Middleware — mellanlager för asynkronitet: Thunk, Saga, Observable
- React Native integreras via Provider, useSelector och redux-persist för offline-läge
- DevTools — time-travel felsökning med återskapning av varje Action
- Normalizr — datanormalisering för effektiva selectorer och uppdateringar
Vi utvecklar en mobil applikation nyckelfärdigt
IT Sectr skapar iOS- och Android-applikationer för startups och företag sedan 2017. Vi ger dig råd och föreslår den bästa lösningen.
Läs också