Redux & Redux Toolkit — App-Wide State ManagementEntry 4 of 11

Providing the Store and Reading State

<Provider> makes the store available to the component tree, and useSelector subscribes a component to part of the state.

Notes

  • Wrap the app once at the root with <Provider store={store}>.
  • useSelector takes a function that receives the full state and returns the piece you need.
  • The component re-renders only when the selected value changes.
  • The subscription is managed automatically and cleaned up on unmount.

What / Why / When

What

Connecting React to the store.

Why

Any component can read shared state without prop drilling.

When

Once at the root; useSelector in every component that reads state.

Code compare

React
// main.tsximport { createRoot } from "react-dom/client";import { Provider } from "react-redux";import store from "./store";import App from "./App";​createRoot(document.getElementById("root")!).render(  <Provider store={store}>    <App />  </Provider>,);
Angular
// app.config.tsimport { ApplicationConfig, isDevMode } from "@angular/core";import { provideStore } from "@ngrx/store";import { provideStoreDevtools } from "@ngrx/store-devtools";import { counterFeature } from "./store/counter.feature";​export const appConfig: ApplicationConfig = {  providers: [    provideStore({ [counterFeature.name]: counterFeature.reducer }),    provideStoreDevtools({ logOnly: !isDevMode() }),  ],};

Differences and gotchas

  • React wraps the tree in a component; Angular registers the store as a provider through DI.
  • store.selectSignal() returns a signal. store.select() returns an Observable if you need RxJS operators.

Quick reference

TaskReactAngular
Provide store<Provider store={store}>provideStore() in app.config.ts
Read stateuseSelector(fn)store.selectSignal(selector)
DevToolsBuilt into RTK / browser extensionprovideStoreDevtools()