Examples
Redux is distributed with a few examples in its source code. Most of these examples are also on CodeSandbox, an online editor that lets you play with the examples online.
The examples fall into two groups. The Redux Toolkit examples show how we recommend writing Redux apps today. The legacy examples were written for older versions of Redux and React Redux. They still run, and they are still useful for seeing how the core Redux API fits together, but they use patterns we no longer recommend for new code.
Redux Toolkit Examples
Counter
Run the Counter example:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter
npm install
npm start
Or check out the sandbox:
This is the most basic example of using Redux Toolkit together with React. It defines a counter slice with createSlice, sets up the store with configureStore, reads state with useSelector, dispatches with useDispatch, and includes an async thunk that simulates fetching a value from a server.
This example includes tests.
Counter (TypeScript)
Run the Counter TS example:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter-ts
npm install
npm start
Or check out the sandbox:
This is the same Counter example written in TypeScript. It shows how to infer the RootState and AppDispatch types from the store and how to define pre-typed useAppSelector and useAppDispatch hooks, as described in Usage with TypeScript.
This example includes tests.
Project Templates
The reduxjs/redux-templates repo contains Vite project templates for React + Redux Toolkit, in both JavaScript and TypeScript. These are the recommended starting point for a new Redux app.
Redux Essentials Example App
The Redux Essentials tutorial builds a small social media app with Redux Toolkit and RTK Query. The finished project is in the reduxjs/redux-essentials-example-app repo, with a branch for each tutorial section.
Legacy Examples
These examples were written for React 17, Redux 4, and React Redux 7. They use createStore, hand-written action types and action creators, switch-statement reducers, and connect() container components. Those patterns still work, but for new apps we recommend the Redux Toolkit examples above and the Redux Essentials tutorial.
Counter Vanilla
Run the Counter Vanilla example:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/counter-vanilla
Then open index.html in your browser.
Or check out the sandbox:
It does not require a build system or a view framework and exists to show the raw Redux API used with ES5.
Todos
Run the Todos example:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/todos
npm install
npm start
Or check out the sandbox:
This example shows how reducers can delegate handling actions to other reducers, and how React Redux's connect() generates container components from presentational components.
This example includes tests.
Shopping Cart
Run the Shopping Cart example:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/shopping-cart
npm install
npm start
Or check out the sandbox:
This example shows important idiomatic Redux patterns that become important as your app grows. In particular, it shows how to store entities in a normalized way by their IDs, how to compose reducers on several levels, and how to define selectors alongside the reducers so the knowledge about the state shape is encapsulated. It also demonstrates logging with Redux Logger and conditional dispatching of actions with Redux Thunk middleware.
Tree View
Run the Tree View example:
git clone https://github.com/reduxjs/redux.git
cd redux/examples/tree-view
npm install
npm start
Or check out the sandbox:
This example demonstrates rendering a deeply nested tree view and representing its state in a normalized form so it is easy to update from reducers. Good rendering performance is achieved by the container components granularly subscribing only to the tree nodes that they render.
This example includes tests.