Redux StoreとProviderの設定

Redux Toolkit (RTK) is the official, recommended way to write Redux logic today. It eliminates the boilerplate of classic Redux by providing utility functions like configureStore, createSlice, and createAsyncThunk. RTK includes best practices by default, such as Immer for immutable updates and Redux DevTools integration.

To get started with Redux Toolkit in React Native, you need two packages: @reduxjs/toolkit provides the core utilities, and react-redux provides the React bindings. Install them with a single command and they are ready to use immediately.

The store is the single source of truth for your entire Redux application state. You create it with configureStore, passing a reducer object that maps slice names to their reducer functions. RTK automatically sets up Redux DevTools and applies recommended middleware like redux-thunk.

The Provider component from react-redux makes the Redux store available to every component in your React Native component tree. Wrap your root component (or NavigationContainer if using React Navigation) with <Provider store={store}>. Any component inside the tree can then access the store using hooks.

Redux enforces a strict unidirectional data flow: the UI dispatches an action, the reducer processes that action to produce a new state, the store saves the new state, and the UI re-renders to reflect the change. This predictable cycle makes debugging and testing straightforward, because every state change is traceable to a specific action.

In TypeScript projects it is best practice to create typed versions of useDispatch and useSelector so you get autocompletion and type safety throughout the app. Export useAppDispatch and useAppSelector from a hooks file and import them in your components instead of the raw hooks.

The reducer key inside configureStore accepts an object where each key becomes a slice name in the global state. For example, passing { counter: counterReducer, user: userReducer } means your state shape is { counter: {...}, user: {...} }. You can add more slices at any time without changing existing slices.

configureStore automatically enables the Redux DevTools browser extension in development mode. With DevTools you can inspect the current state, view every dispatched action, and even time-travel back to a previous state snapshot. This is one of the biggest debugging advantages of using Redux over plain useState.

RTK's configureStore adds several middleware by default: redux-thunk for async action creators, serializability check middleware that warns when non-serializable values (like functions or class instances) are placed in state, and an immutability check that warns if state is mutated directly. You can customize this with the middleware option.

A clean folder structure makes Redux apps maintainable. The common pattern is a store/ folder with an index.ts for the store configuration and a features/ subfolder where each feature has its own slice file. For example: store/features/counter/counterSlice.ts. Keep slice files small and focused on a single domain concept.

A quick sanity check after wiring up the Provider is to log store.getState() in the store file. This prints the initial state to the console and confirms the reducer map is correctly structured. Once you see the expected shape — for example { counter: { value: 0 } } — you know the store is ready for components to read from and write to.

Test your understanding of React Native Mobile Development concepts from this lesson.

In this lesson you learned: Redux Toolkit reduces boilerplate with configureStore and built-in middleware, the Provider component makes the store accessible to the entire component tree, and typed hooks (useAppDispatch, useAppSelector) add TypeScript safety to your Redux code. Next up we explore creating slices with createSlice.