Konfigurera Redux Store och Provider

Store är den enda sanningskällan för hela Redux-applikationens state. Du skapar den med configureStore och skickar in ett reducer-objekt som mappar slice-namn till deras reducer-funktioner. RTK konfigurerar automatiskt Redux DevTools och aktiverar rekommenderad middleware som redux-thunk.

Komponenten Provider från react-redux gör Redux store tillgänglig för alla komponenter i ditt React Native-komponentträd. Omslut din rotkomponent (eller NavigationContainer om du använder React Navigation) med <Provider store={store}>. Alla komponenter i trädet kan sedan komma åt store med hjälp av hooks.

Redux framtvingar ett strikt enkelriktat dataflöde: gränssnittet dispatchar en action, reducer bearbetar den actionen för att skapa ett nytt state, store sparar det nya statet och gränssnittet renderas om för att återspegla ändringen. Den här förutsägbara cykeln gör felsökning och testning enkelt, eftersom varje state-ändring kan spåras till en specifik action.

I TypeScript-projekt är det bästa praxis att skapa typade versioner av useDispatch och useSelector så att du får autokomplettering och typsäkerhet i hela appen. Exportera useAppDispatch och useAppSelector från en hooks-fil och importera dem i dina komponenter i stället för de vanliga hooks-funktionerna.

Nyckeln reducer i configureStore tar emot ett objekt där varje nyckel blir ett slice-namn i det globala statet. Om du till exempel skickar in { counter: counterReducer, user: userReducer } får ditt state formen { counter: {...}, user: {...} }. Du kan när som helst lägga till fler slices utan att ändra befintliga slices.

configureStore aktiverar automatiskt webbläsartillägget Redux DevTools i utvecklingsläge. Med DevTools kan du inspektera det aktuella statet, visa varje dispatchad action och till och med gå tillbaka i tiden till en tidigare state-ögonblicksbild. Detta är en av de största fördelarna vid felsökning med Redux jämfört med vanlig useState.

RTK:s configureStore lägger som standard till flera middleware: redux-thunk för asynkrona action creators, middleware för serializability check som varnar när icke-serialiserbara värden (som funktioner eller klassinstanser) läggs i state, samt en immutability check som varnar om state ändras direkt. Du kan anpassa detta med alternativet middleware.

En tydlig mappstruktur gör Redux-appar enklare att underhålla. Ett vanligt mönster är en mapp store/ med en index.ts för store-konfigurationen och en undermapp features/ där varje funktion har en egen slice-fil. Till exempel: store/features/counter/counterSlice.ts. Håll slice-filer små och fokuserade på ett enda domänbegrepp.

En snabb rimlighetskontroll efter att du har kopplat in Provider är att logga store.getState() i store-filen. Detta skriver ut det initiala statet i konsolen och bekräftar att reducer-kartan är korrekt strukturerad. När du ser den förväntade formen — till exempel { counter: { value: 0 } } — vet du att store är redo för komponenter att läsa från och skriva till.

I den här lektionen har du lärt dig att Redux Toolkit minskar mängden standardkod med configureStore och inbyggd middleware, att komponenten Provider gör store tillgänglig för hela komponentträdet och att typade hooks (useAppDispatch, useAppSelector) ger TypeScript-säkerhet i din Redux-kod. Härnäst utforskar vi hur du skapar slices med createSlice.