Skip to content

Commit

Permalink
GitBook: [master] 140 pages modified
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson authored and gitbook-bot committed Sep 11, 2018
1 parent 6e6de51 commit 2ef44e9
Show file tree
Hide file tree
Showing 84 changed files with 2,873 additions and 3,112 deletions.
205 changes: 96 additions & 109 deletions README.md

Large diffs are not rendered by default.

11 changes: 11 additions & 0 deletions advanced/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# Advanced

In the [basics walkthrough](../basics/), we explored how to structure a simple Redux application. In this walkthrough, we will explore how AJAX and routing fit into the picture.

* [Async Actions](asyncactions.md)
* [Async Flow](asyncflow.md)
* [Middleware](middleware.md)
* [Usage with React Router](usagewithreactrouter.md)
* [Example: Reddit API](exampleredditapi.md)
* [Next Steps](https://github.com/reactjs/redux/tree/master/docs/advanced/NextSteps.md)

151 changes: 77 additions & 74 deletions docs/advanced/AsyncActions.md → advanced/asyncactions.md

Large diffs are not rendered by default.

13 changes: 7 additions & 6 deletions docs/advanced/AsyncFlow.md → advanced/asyncflow.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
# Async Flow

Without [middleware](Middleware.md), Redux store only supports [synchronous data flow](../basics/DataFlow.md). This is what you get by default with [`createStore()`](../api/createStore.md).
Without [middleware](middleware.md), Redux store only supports [synchronous data flow](../basics/dataflow.md). This is what you get by default with [`createStore()`](../api/createstore.md).

You may enhance [`createStore()`](../api/createStore.md) with [`applyMiddleware()`](../api/applyMiddleware.md). It is not required, but it lets you [express asynchronous actions in a convenient way](AsyncActions.md).
You may enhance [`createStore()`](../api/createstore.md) with [`applyMiddleware()`](../api/applymiddleware.md). It is not required, but it lets you [express asynchronous actions in a convenient way](asyncactions.md).

Asynchronous middleware like [redux-thunk](https://github.com/gaearon/redux-thunk) or [redux-promise](https://github.com/acdlite/redux-promise) wraps the store's [`dispatch()`](../api/Store.md#dispatch) method and allows you to dispatch something other than actions, for example, functions or Promises. Any middleware you use can then interpret anything you dispatch, and in turn, can pass actions to the next middleware in the chain. For example, a Promise middleware can intercept Promises and dispatch a pair of begin/end actions asynchronously in response to each Promise.
Asynchronous middleware like [redux-thunk](https://github.com/gaearon/redux-thunk) or [redux-promise](https://github.com/acdlite/redux-promise) wraps the store's [`dispatch()`](../api/store.md#dispatch) method and allows you to dispatch something other than actions, for example, functions or Promises. Any middleware you use can then interpret anything you dispatch, and in turn, can pass actions to the next middleware in the chain. For example, a Promise middleware can intercept Promises and dispatch a pair of begin/end actions asynchronously in response to each Promise.

When the last middleware in the chain dispatches an action, it has to be a plain object. This is when the [synchronous Redux data flow](../basics/DataFlow.md) takes place.
When the last middleware in the chain dispatches an action, it has to be a plain object. This is when the [synchronous Redux data flow](../basics/dataflow.md) takes place.

Check out [the full source code for the async example](ExampleRedditAPI.md).
Check out [the full source code for the async example](exampleredditapi.md).

## Next Steps

Now that you've seen an example of what middleware can do in Redux, it's time to learn how it actually works, and how you can create your own. Go on to the next detailed section about [Middleware](Middleware.md).
Now that you've seen an example of what middleware can do in Redux, it's time to learn how it actually works, and how you can create your own. Go on to the next detailed section about [Middleware](middleware.md).

35 changes: 18 additions & 17 deletions docs/advanced/ExampleRedditAPI.md → advanced/exampleredditapi.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# Example: Reddit API

This is the complete source code of the Reddit headline fetching example we built during the [advanced tutorial](README.md).
This is the complete source code of the Reddit headline fetching example we built during the [advanced tutorial](./).

## Entry Point

#### `index.js`
### `index.js`

```js
```javascript
import 'babel-polyfill'

import React from 'react'
Expand All @@ -21,9 +21,9 @@ render(

## Action Creators and Constants

#### `actions.js`
### `actions.js`

```js
```javascript
import fetch from 'cross-fetch'

export const REQUEST_POSTS = 'REQUEST_POSTS'
Expand Down Expand Up @@ -92,9 +92,9 @@ export function fetchPostsIfNeeded(subreddit) {

## Reducers

#### `reducers.js`
### `reducers.js`

```js
```javascript
import { combineReducers } from 'redux'
import {
SELECT_SUBREDDIT,
Expand Down Expand Up @@ -165,9 +165,9 @@ export default rootReducer

## Store

#### `configureStore.js`
### `configureStore.js`

```js
```javascript
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
Expand All @@ -189,9 +189,9 @@ export default function configureStore(preloadedState) {

## Container Components

#### `containers/Root.js`
### `containers/Root.js`

```js
```javascript
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from '../configureStore'
Expand All @@ -210,9 +210,9 @@ export default class Root extends Component {
}
```

#### `containers/AsyncApp.js`
### `containers/AsyncApp.js`

```js
```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
Expand Down Expand Up @@ -319,9 +319,9 @@ export default connect(mapStateToProps)(AsyncApp)

## Presentational Components

#### `components/Picker.js`
### `components/Picker.js`

```js
```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'

Expand Down Expand Up @@ -351,9 +351,9 @@ Picker.propTypes = {
}
```

#### `components/Posts.js`
### `components/Posts.js`

```js
```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'

Expand All @@ -371,3 +371,4 @@ Posts.propTypes = {
posts: PropTypes.array.isRequired
}
```

Loading

0 comments on commit 2ef44e9

Please sign in to comment.