Skip to content

Replace README Gist with CodeSandbox Example #3117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Replace README Gist with CodeSandbox Example #3117

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96db635
Replace README Gist with CodeSandbox Example
dan-kez Aug 30, 2018
ad7c9ca
Revert README change and set embeds on examples page
dan-kez Oct 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion docs/introduction/Examples.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ npm start

Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/counter):

{% embed data="{\"url\":\"https://codesandbox.io/embed/github/reactjs/redux/tree/master/examples/counter\",\"type\":\"link\",\"title\":\"CodeSandbox\",\"description\":\"CodeSandbox is an online editor tailored for web applications.\",\"icon\":{\"type\":\"icon\",\"url\":\"https://codesandbox.io/favicon.ico\",\"aspectRatio\":0},\"thumbnail\":{\"type\":\"thumbnail\",\"url\":\"https://codesandbox.io/static/img/banner.png\",\"width\":1200,\"height\":630,\"aspectRatio\":0.525}}" %}
{% embed url="https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/counter" %}

This is the most basic example of using Redux together with React. For simplicity, it re-renders the React component manually when the store changes. In real projects, you will likely want to use the highly performant [React Redux](https://github.com/reactjs/react-redux) bindings instead.

Expand All @@ -49,6 +49,8 @@ npm start

Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos).

{% embed url="https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos" %}

This is the best example to get a deeper understanding of how the state updates work together with components in Redux. It shows how reducers can delegate handling actions to other reducers, and how you can use [React Redux](https://github.com/reactjs/react-redux) to generate container components from your presentational components.

This example includes tests.
Expand All @@ -67,6 +69,8 @@ npm start

Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos-with-undo).

{% embed url="https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todos-with-undo" %}

This is a variation on the previous example. It is almost identical, but additionally shows how wrapping your reducer with [Redux Undo](https://github.com/omnidan/redux-undo) lets you add a Undo/Redo functionality to your app with a few lines of code.

## TodoMVC
Expand All @@ -83,6 +87,8 @@ npm start

Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todomvc).

{% embed url="https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/todomvc" %}

This is the classical [TodoMVC](http://todomvc.com/) example. It's here for the sake of comparison, but it covers the same points as the Todos example.

This example includes tests.
Expand All @@ -101,6 +107,8 @@ npm start

Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/shopping-cart).

{% embed url="https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/shopping-cart" %}

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](https://github.com/fcomb/redux-logger) and conditional dispatching of actions with [Redux Thunk](https://github.com/gaearon/redux-thunk) middleware.

## Tree View
Expand All @@ -117,6 +125,8 @@ npm start

Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/tree-view).

{% embed url="https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/tree-view" %}

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.
Expand All @@ -135,6 +145,8 @@ npm start

Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/async).

{% embed url="https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/async" %}

This example includes reading from an asynchronous API, fetching data in response to user input, showing loading indicators, caching the response, and invalidating the cache. It uses [Redux Thunk](https://github.com/gaearon/redux-thunk) middleware to encapsulate asynchronous side effects.

## Universal
Expand Down Expand Up @@ -165,6 +177,8 @@ npm start

Or check out the [sandbox](https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/real-world).

{% embed url="https://codesandbox.io/s/github/reactjs/redux/tree/master/examples/real-world" %}

This is the most advanced example. It is dense by design. It covers keeping fetched entities in a normalized cache, implementing a custom middleware for API calls, rendering partially loaded data, pagination, caching responses, displaying error messages, and routing. Additionally, it includes Redux DevTools.

## More Examples
Expand Down