Redux: μοτίβο διαχείρισης κατάστασης στο React Native
Redux — ένα προβλέψιμο δοχείο διαχείρισης κατάστασης για εφαρμογές JavaScript, που δημιουργήθηκε από τον Dan Abramov το 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. Το εργαλείο υποστηρίζεται από όλα τα σύγχρονα frameworks: React, React Native, Angular, Vue, ακόμα και καθαρό JavaScript χωρίς frameworks.
Μονόδρομη ροή δεδομένων
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 και υποστήριξη για 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 και 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 | Memoization μέσω createSelector |
Middleware και Redux Thunk
Middleware — αλυσίδα συναρτήσεων που παρεμβάλλεται μεταξύ της κλήσης dispatch και της στιγμής που το Action φτάνει στον Reducer. Κάθε middleware λαμβάνει το API του Store και μπορεί να καταγράφει, να τροποποιεί, να καθυστερεί ή να ακυρώνει το Action. Redux Thunk — το τυπικό middleware για ασύγχρονες λειτουργίες, που επιτρέπει την αποστολή συναρτήσεων αντί για αντικείμενα.
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 — για πολύπλοκα σενάρια με 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, μειώνοντας τον επαναλαμβανόμενο κώδικα 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 με αυτόματη δημιουργία hooks, προσωρινή αποθήκευση, ακύρωση ετικετών και αισιόδοξες ενημερώσεις. Το RTK Query αντικαθιστά τη χειροκίνητη γραφή Thunk, Reducer και Selector για κάθε αίτημα API.
Entity Adapter — το βοηθητικό πρόγραμμα createEntityAdapter για κανονικοποίηση συλλογών οντοτήτων. Παρέχει ενσωματωμένους CRUD reducers, selectors και ταξινόμηση για πίνακες αντικειμένων. Εάν το Store αποθηκεύει λίστες χρηστών, προϊόντων ή παραγγελιών — το Entity Adapter μειώνει τον κώδικα αναγωγής κατά 80%.
Redux στο React Native
React Native Redux — ο τυπικός συνδυασμός για κινητές εφαρμογές σε JavaScript. Το Redux ενσωματώνεται μέσω του Provider από το react-redux, που τυλίγει το ριζικό στοιχείο της εφαρμογής. Τα hooks 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 με selectors λύνει αυτό το πρόβλημα.
Τι είναι το Immer στο Redux Toolkit;
Immer — μια βιβλιοθήκη για αμετάβλητη εργασία με κατάσταση, ενσωματωμένη στο Redux Toolkit. Το Immer επιτρέπει τη γραφή reducers σαν να μεταλλάσσετε άμεσα το state: state.value += 1. Κάτω από την κουκούλα, το Immer δημιουργεί ένα proxy αντικείμενο (draft), παρακολουθεί τις αλλαγές και επιστρέφει ένα νέο αμετάβλητο αντικείμενο. Αυτό μειώνει τον όγκο κώδικα των reducers κατά 50% και εξαλείφει τυχαίες μεταλλάξεις.
Πώς να δοκιμάσετε το Redux;
Η λογική Redux δοκιμάζεται απομονωμένα: Reducer — καθαρή συνάρτηση, αρκεί να κληθεί με διαφορετικά Action και να ελεγχθεί το αποτέλεσμα. Action Creator — ελέγξτε το επιστρεφόμενο αντικείμενο. Thunk — κάντε mock το API, καλέστε το dispatch και ελέγξτε ποια Action στάλθηκαν. Στοιχείο με useSelector — χρησιμοποιήστε Provider με δοκιμαστικό Store στο renderer. Redux DevTools βοηθούν στη σύνταξη δοκιμής αναπαράγοντας την ακολουθία Action από μια πραγματική συνεδρία.
Πότε να χρησιμοποιήσετε Redux αντί για useState;
useState είναι αρκετό για τοπική κατάσταση ενός στοιχείου: κείμενο πεδίου, ανοιχτό/κλειστό modal. Redux χρειάζεται όταν η κατάσταση μοιράζεται μεταξύ πολλών οθονών, απαιτεί ασύγχρονο συγχρονισμό (δεδομένα από διακομιστή), πρέπει να διατηρείται μεταξύ επανεκκινήσεων της εφαρμογής (persist) ή απαιτεί time-travel εντοπισμό σφαλμάτων. Για μικρές εφαρμογές, το Redux είναι υπερβολικό — χρησιμοποιήστε Context + useReducer.
Τι είναι το normalize στο Redux;
Normalizr — μια βιβλιοθήκη για κανονικοποίηση ένθετων δεδομένων σε επίπεδη δομή Store. Αντί για αποθήκευση βαθιών αντικειμένων όπως user.posts[0].comments, η κανονικοποίηση δημιουργεί λεξικά: entities.users, entities.posts, entities.comments με αναφορές ανά ID. Αυτό απλοποιεί την ενημέρωση μιας οντότητας σε όλα τα σημεία και επιταχύνει τους selectors. Το Redux Toolkit συνιστά κανονικοποιημένα δεδομένα για πολύπλοκα μοντέλα.
Σύνοψη
- Redux — προβλέψιμο δοχείο κατάστασης με μοναδικό Store και καθαρούς Reducers
- 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 — κανονικοποίηση δεδομένων για αποδοτικούς selectors και ενημερώσεις
Θα αναπτύξουμε μια εφαρμογή για κινητά έτοιμη για χρήση
Η IT Sectr δημιουργεί εφαρμογές iOS και Android για νεοφυείς επιχειρήσεις και επιχειρήσεις από το 2017. Θα σας συμβουλεύσουμε και θα προτείνουμε την καλύτερη λύση.
Διαβάστε επίσης