Redux centralizes application data in a store that React components read with selectors and change by dispatching actions handled by reducer functions. Redux Toolkit supplies the standard setup, while React-Redux connects the store to components. section 20.5 section 20.6
Build a typed Redux integration around these pieces:
- Create a slice with a name, initial state, and reducer functions; export its generated reducer and actions. section 20.5
- Configure the store with configureStore, then derive AppDispatch and RootState types for typed hooks. section 20.5
- Wrap the application in React-Redux Provider, select state with useAppSelector, and dispatch actions with useAppDispatch. section 20.5
- Use Redux Toolkit Query to define HTTP endpoints, add the API reducer and middleware, and expose generated query hooks. section 20.5.1
Product selections
In src/data/selectionSlice.ts, create a selections slice whose initial state is a ProductSelection array and whose addToOrder reducer accepts a product and quantity. In App.tsx, select state and dispatch reducers.addToOrder([product, quantity]). Register the reducer in src/data/dataStore.ts, then provide the store from src/index.tsx. section 20.5
Listing 20.22 The contents of the storeApis.ts file in the src/data folder
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { Product } from './entities';
const protocol = "http";
const hostname = "localhost";
const port = 4600;
const baseUrl = `${protocol}://${hostname}:${port}`;
export const productsApi = createApi({
reducerPath: "products",
baseQuery: fetchBaseQuery({baseUrl}),
endpoints: (builder) => ({
getProducts: builder.query<Product[], void>({
query: () => "products"
})
})
})
export const { useGetProductsQuery } = productsApi;
Inspect a complete Redux Toolkit Query definition that creates a typed useGetProductsQuery hook for a products HTTP endpoint. section 20.5.1
