Redux Toolkit

npx expo install @reduxjs/toolkit react-redux

// src/app/store.ts
import { configureStore } from "@reduxjs/toolkit";
import { cartSlice } from "@/features/cart/cartSlice";
import { checkoutSlice } from "@/features/checkout/checkoutSlice";
 
export const store = configureStore({
  reducer: {
    cart: cartSlice.reducer,
    checkout: checkoutSlice.reducer,
  },
  devTools: __DEV__,
});
 
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// app/_layout.tsx
import { Provider } from "react-redux";
import { Stack } from "expo-router";
import { store } from "@/app/store";
 
export default function RootLayout() {
  return (
    <Provider store={store}>
      <Stack />
    </Provider>
  );
}

// features/cart/cartSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
type CartItem = { productId: string; qty: number };
 
type CartState = { items: CartItem[] };
 
const initialState: CartState = { items: [] };
 
export const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addItem(state, action: PayloadAction<CartItem>) {
      state.items.push(action.payload);
    },
    clearCart(state) {
      state.items = [];
    },
  },
});
 
export const { addItem, clearCart } = cartSlice.actions;

// Typed hooks
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { AppDispatch, RootState } from "@/app/store";
 
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

// checkoutSlice.ts - multi-step client workflow with explicit actions
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
type Step = "cart" | "shipping" | "payment" | "done";
 
type CheckoutState = {
  step: Step;
  shippingId: string | null;
  error: string | null;
};
 
const initialState: CheckoutState = {
  step: "cart",
  shippingId: null,
  error: null,
};
 
export const checkoutSlice = createSlice({
  name: "checkout",
  initialState,
  reducers: {
    setStep(state, action: PayloadAction<Step>) {
      state.step = action.payload;
      state.error = null;
    },
    selectShipping(state, action: PayloadAction<string>) {
      state.shippingId = action.payload;
    },
    setError(state, action: PayloadAction<string>) {
      state.error = action.payload;
    },
    resetCheckout() {
      return initialState;
    },
  },
});
 
export const { setStep, selectShipping, setError, resetCheckout } = checkoutSlice.actions;

// CheckoutScreen.tsx - server shipping methods via TanStack Query; steps via Redux
import { useQuery } from "@tanstack/react-query";
import { Pressable, Text, View } from "react-native";
import { useAppDispatch, useAppSelector } from "@/app/hooks";
import { addItem, clearCart } from "@/features/cart/cartSlice";
import { resetCheckout, selectShipping, setStep } from "@/features/checkout/checkoutSlice";
 
function fetchShippingMethods() {
  return Promise.resolve([
    { id: "standard", label: "Standard" },
    { id: "express", label: "Express" },
  ]);
}
 
export function CheckoutScreen() {
  const dispatch = useAppDispatch();
  const step = useAppSelector((s) => s.checkout.step);
  const shippingId = useAppSelector((s) => s.checkout.shippingId);
  const cartCount = useAppSelector((s) => s.cart.items.length);
 
  const { data: methods = [] } = useQuery({
    queryKey: ["shipping-methods"],
    queryFn: fetchShippingMethods,
    enabled: step === "shipping",
  });
 
  return (
    <View style={{ padding: 16, gap: 8 }}>
      <Text>Step: {step}</Text>
      <Text>Cart items: {cartCount}</Text>
 
      {step === "cart" && (
        <Pressable
          onPress={() => {
            dispatch(addItem({ productId: "demo", qty: 1 }));
            dispatch(setStep("shipping"));
          }}
        >
          <Text>Continue to shipping</Text>
        </Pressable>
      )}
 
      {step === "shipping" &&
        methods.map((m) => (
          <Pressable
            key={m.id}
            onPress={() => {
              dispatch(selectShipping(m.id));
              dispatch(setStep("payment"));
            }}
          >
            <Text style={{ fontWeight: shippingId === m.id ? "700" : "400" }}>{m.label}</Text>
          </Pressable>
        ))}
 
      {step === "payment" && (
        <Pressable
          onPress={() => {
            dispatch(clearCart());
            dispatch(resetCheckout());
          }}
        >
          <Text>Pay (demo)</Text>
        </Pressable>
      )}
    </View>
  );
}

// checkoutSlice.test.ts
import { checkoutSlice, setStep } from "./checkoutSlice";
 
test("setStep clears error", () => {
  const state = checkoutSlice.reducer(
    { step: "cart", shippingId: null, error: "fail" },
    setStep("shipping")
  );
  expect(state.step).toBe("shipping");
  expect(state.error).toBeNull();
});

middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: { ignoredActions: ["persist/PERSIST"] },
  }),

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 
export const api = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({ baseUrl: "https://api.example.com" }),
  endpoints: (builder) => ({
    getOrders: builder.query<Order[], void>({ query: () => "/orders" }),
  }),
});
 
// store reducer: { [api.reducerPath]: api.reducer }
// middleware: getDefaultMiddleware().concat(api.middleware)

import { createEntityAdapter, createSlice } from "@reduxjs/toolkit";
 
const ordersAdapter = createEntityAdapter<Order>();
 
const ordersSlice = createSlice({
  name: "orders",
  initialState: ordersAdapter.getInitialState(),
  reducers: {
    ordersLoaded: ordersAdapter.setAll,
    orderUpdated: ordersAdapter.updateOne,
  },
});

import { createListenerMiddleware } from "@reduxjs/toolkit";
 
const listenerMiddleware = createListenerMiddleware();
 
listenerMiddleware.startListening({
  actionCreator: clearCart,
  effect: async (_action, listenerApi) => {
    listenerApi.dispatch(resetCheckout());
  },
});