type-safe patterns

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Avoid broad state selection in parent components

Wrong: selecting const postsState = useAppSelector((state) => state.posts) in a parent and passing postsState.items and postsState.status to children as props. Correct: each child component selects only state.posts.items and state.posts.status independently with its own useAppSelector calls.

Narrow subscriptions at usage site, not parents

Components should select only the specific state values they render, as close to the usage site as possible. Avoid selecting entire slices in parent components and threading them down as props, as this widens the subscription surface and pushes rerenders through the component tree.

Setup pattern with configureStore, typed hooks, and Provider

Set up Redux Toolkit by creating a slice with createSlice, configuring the store with configureStore, exporting RootState and AppDispatch types, creating typed hooks with useDispatch.withTypes<AppDispatch>() and useSelector.withTypes<RootState>(), wrapping the app in a Provider, and using those typed hooks in React components.

Use typed hooks in React components instead of connecting the store directly

React components should use useAppDispatch and useAppSelector hooks to read state and dispatch actions. Importing the store directly into components and calling store.getState() is an anti-pattern for UI code, though it may be used as an escape hatch for non-React integrations.

Create pre-typed useAppDispatch and useAppSelector hooks

Export pre-typed versions of useDispatch and useSelector by calling useDispatch.withTypes<AppDispatch>() and useSelector.withTypes<RootState>() in a hooks file. This ensures all components have correct type inference without needing to specify types at each use site.

Hooks are the modern default for React-Redux integration

Use hooks like useAppDispatch and useAppSelector for all new code. The connect() higher-order component is the legacy pattern and should not be used in new applications.

Organize Redux code with centralized app/ folder and feature folders

Store all Redux store wiring (store.ts, hooks.ts) in an app/ folder at the root of src/. Keep feature-specific Redux logic (slices, components) in colocated feature folders like src/features/posts/ and src/features/users/.

SSR apps: create the store inside the Provider with useState

For SSR-heavy frameworks like Next.js, create a makeStore function that returns a new configureStore instance. Inside a client-side StoreProvider component, call useState(makeStore) to create one store instance per request and keep it stable across renders. This prevents client state loss on re-renders and avoids server-side store leakage across requests.

Derive RootState and AppDispatch types from the store instance in SSR apps

In SSR apps using makeStore, export RootState as ReturnType<AppStore['getState']> and AppDispatch as AppStore['dispatch'] where AppStore is ReturnType<typeof makeStore>. This ensures types stay synchronized with the runtime store factory.

Export RootState and AppDispatch types from store

After creating a store with configureStore, export RootState as ReturnType<typeof store.getState> and AppDispatch as typeof store.dispatch. These types are needed for pre-typed hooks and other type-safe patterns.

WithSlice type utility

WithSlice is a type utility from Redux Toolkit that wraps a slice to extract its type for use in extending the LazyLoadedSlices interface. Use it in the form WithSlice<typeof lazySlice> when dynamically typing lazy-loaded slices.

Give your agent this brain