Skip to content

Latest commit

 

History

History
158 lines (104 loc) · 3.33 KB

Examples.md

File metadata and controls

158 lines (104 loc) · 3.33 KB
Raw

Examples

Redux is distributed with a few examples in its source code.

Note on Copying

If you copy Redux examples outside their folders, you can delete some lines at the end of their webpack.config.js files. They follow a “You can safely delete these lines in your project.” comment.

Counter

Run the Counter example:

git clone https://github.com/rackt/redux.git

cd redux/examples/counter
npm install
npm start

open http://localhost:3000/

It covers:

  • Basic Redux flow
  • Testing

TodoMVC

Run the TodoMVC example:

git clone https://github.com/rackt/redux.git

cd redux/examples/todomvc
npm install
npm start

open http://localhost:3000/

It covers:

  • Redux flow with two reducers
  • Updating nested data
  • Testing

Todos with Undo

Run the todos-with-undo example:

git clone https://github.com/rackt/redux.git

cd redux/examples/todos-with-undo
npm install
npm start

open http://localhost:3000/

It covers:

  • Redux flow with two reducers
  • Undo/Redo functionality in Redux with redux-undo

Async

Run the Async example:

git clone https://github.com/rackt/redux.git

cd redux/examples/async
npm install
npm start

open http://localhost:3000/

It covers:

  • Basic async Redux flow with redux-thunk
  • Caching responses and showing a spinner while data is fetching
  • Invalidating the cached data

Universal

Run the Universal example:

git clone https://github.com/rackt/redux.git

cd redux/examples/universal
npm install
npm start

open http://localhost:3000/

It covers:

  • Universal rendering with Redux and React
  • Prefetching state based on input and via asynchronous fetches.
  • Passing state from the server to the client

Real World

Run the Real World example:

git clone https://github.com/rackt/redux.git

cd redux/examples/real-world
npm install
npm start

open http://localhost:3000/

It covers:

  • Real-world async Redux flow
  • Keeping entities in a normalized entity cache
  • A custom middleware for API calls
  • Caching responses and showing a spinner while data is fetching
  • Pagination
  • Routing

Shopping Cart

Run the Shopping Cart example:

git clone https://github.com/rackt/redux.git

cd redux/examples/shopping-cart
npm install
npm start

open http://localhost:3000/

This is an example of idiomatic Redux development patterns.

It covers:

  • Normalized state
  • Explicit entity ID tracking
  • Reducer composition
  • Queries defined alongside reducers
  • Example of rollback on failure
  • Safe conditional action dispatching
  • Using only React Redux to bind action creators
  • Conditional middleware (logging example)

More Examples

You can find more examples in Awesome Redux.