Skip to content

Commit 4590e09

Browse files
committed
Update docs to improve readability
Signed-off-by: An Xiao <[email protected]>
1 parent f663e5a commit 4590e09

File tree

8 files changed

+27
-27
lines changed

8 files changed

+27
-27
lines changed

docs/advanced/AsyncActions.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ function receivePosts(subreddit, json) {
115115
This is all we need to know for now. The particular mechanism to dispatch these actions together with network requests will be discussed later.
116116

117117
> ##### Note on Error Handling
118-
118+
>
119119
> In a real app, you'd also want to dispatch an action on request failure. We won't implement error handling in this tutorial, but the [real world example](../introduction/Examples.md#real-world) shows one of the possible approaches.
120120
121121
## Designing the State Shape
@@ -163,11 +163,11 @@ There are a few important bits here:
163163
- For every list of items, you'll want to store `isFetching` to show a spinner, `didInvalidate` so you can later toggle it when the data is stale, `lastUpdated` so you know when it was fetched the last time, and the `items` themselves. In a real app, you'll also want to store pagination state like `fetchedPageCount` and `nextPageUrl`.
164164

165165
> ##### Note on Nested Entities
166-
166+
>
167167
> In this example, we store the received items together with the pagination information. However, this approach won't work well if you have nested entities referencing each other, or if you let the user edit items. Imagine the user wants to edit a fetched post, but this post is duplicated in several places in the state tree. This would be really painful to implement.
168-
168+
>
169169
> If you have nested entities, or if you let users edit received entities, you should keep them separately in the state as if it was a database. In pagination information, you would only refer to them by their IDs. This lets you always keep them up to date. The [real world example](../introduction/Examples.md#real-world) shows this approach, together with [normalizr](https://github.com/paularmstrong/normalizr) to normalize the nested API responses. With this approach, your state might look like this:
170-
170+
>
171171
> ```js
172172
> {
173173
> selectedSubreddit: 'frontend',
@@ -206,15 +206,15 @@ There are a few important bits here:
206206
> }
207207
> }
208208
> ```
209-
209+
>
210210
> In this guide, we won't normalize entities, but it's something you should consider for a more dynamic application.
211211
212212
## Handling Actions
213213
214214
Before going into the details of dispatching actions together with network requests, we will write the reducers for the actions we defined above.
215215
216216
> ##### Note on Reducer Composition
217-
217+
>
218218
> Here, we assume that you understand reducer composition with [`combineReducers()`](../api/combineReducers.md), as described in the [Splitting Reducers](../basics/Reducers.md#splitting-reducers) section on the [basics guide](../basics/README.md). If you don't, please [read it first](../basics/Reducers.md#splitting-reducers).
219219
220220
#### `reducers.js`
@@ -390,18 +390,18 @@ export function fetchPosts(subreddit) {
390390
```
391391

392392
> ##### Note on `fetch`
393-
393+
>
394394
> We use [`fetch` API](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) in the examples. It is a new API for making network requests that replaces `XMLHttpRequest` for most common needs. Because most browsers don't yet support it natively, we suggest that you use [`cross-fetch`](https://github.com/lquixada/cross-fetch) library:
395-
395+
>
396396
> ```js
397397
> // Do this in every file where you use `fetch`
398398
> import fetch from 'cross-fetch'
399399
> ```
400-
400+
>
401401
> Internally, it uses [`whatwg-fetch` polyfill](https://github.com/github/fetch) on the client, and [`node-fetch`](https://github.com/bitinn/node-fetch) on the server, so you won't need to change API calls if you change your app to be [universal](https://medium.com/@mjackson/universal-javascript-4761051b7ae9).
402-
402+
>
403403
> Be aware that any `fetch` polyfill assumes a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) polyfill is already present. The easiest way to ensure you have a Promise polyfill is to enable Babel's ES6 polyfill in your entry point before any other code runs:
404-
404+
>
405405
> ```js
406406
> // Do this once before any other code in your app
407407
> import 'babel-polyfill'
@@ -515,7 +515,7 @@ store
515515
```
516516

517517
> ##### Note about Server Rendering
518-
518+
>
519519
> Async action creators are especially convenient for server rendering. You can create a store, dispatch a single async action creator that dispatches other async action creators to fetch data for a whole section of your app, and only render after the Promise it returns, completes. Then your store will already be hydrated with the state you need before rendering.
520520
521521
[Thunk middleware](https://github.com/gaearon/redux-thunk) isn't the only way to orchestrate asynchronous actions in Redux:

docs/advanced/Middleware.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ How do we approach this with Redux?
3232
The most naïve solution is just to log the action and the next state yourself every time you call [`store.dispatch(action)`](../api/Store.md#dispatch). It's not really a solution, but just a first step towards understanding the problem.
3333

3434
> ##### Note
35-
35+
>
3636
> If you're using [react-redux](https://github.com/reduxjs/react-redux) or similar bindings, you likely won't have direct access to the store instance in your components. For the next few paragraphs, just assume you pass the store down explicitly.
3737
3838
Say, you call this when creating a todo:

docs/advanced/UsageWithReactRouter.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ So you want to do routing with your Redux app. You can use it with [React Router
2020
Before integrating React Router, we need to configure our development server. Indeed, our development server may be unaware of the declared routes in React Router configuration. For example, if you access `/todos` and refresh, your development server needs to be instructed to serve `index.html` because it is a single-page app. Here's how to enable this with popular development servers.
2121

2222
> ### Note on Create React App
23-
23+
>
2424
> If you are using Create React App, you won't need to configure a fallback URL, it is automatically done.
2525
2626
### Configuring Express
@@ -221,7 +221,7 @@ const App = ({ match: { params } }) => {
221221
Now that you know how to do basic routing, you can learn more about [React Router API](https://reacttraining.com/react-router/)
222222

223223
> ##### Note About Other Routing Libraries
224-
224+
>
225225
> _Redux Router_ is an experimental library, it lets you keep entirely the state of your URL inside your redux store. It has the same API with React Router API but has a smaller community support than react-router.
226-
226+
>
227227
> _React Router Redux_ creates a binding between your redux app and react-router and it keeps them in sync. Without this binding, you will not be able to rewind the actions with Time Travel. Unless you need this, React Router and Redux can operate completely apart.

docs/api/Store.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ A store is not a class. It's just an object with a few methods on it.
1414
To create it, pass your root [reducing function](../Glossary.md#reducer) to [`createStore`](createStore.md).
1515

1616
> ##### A Note for Flux Users
17-
17+
>
1818
> If you're coming from Flux, there is a single important difference you need to understand. Redux doesn't have a Dispatcher or support many stores. **Instead, there is just a single store with a single root [reducing function](../Glossary.md#reducer).** As your app grows, instead of adding stores, you split the root reducer into smaller reducers independently operating on the different parts of the state tree. You can use a helper like [`combineReducers`](combineReducers.md) to combine them. This is similar to how there is just one root component in a React app, but it is composed out of many small components.
1919
2020
### Store Methods
@@ -46,7 +46,7 @@ The store's reducing function will be called with the current [`getState()`](#ge
4646
> ##### A Note for Flux Users
4747
>
4848
> If you attempt to call `dispatch` from inside the [reducer](../Glossary.md#reducer), it will throw with an error saying “Reducers may not dispatch actions.” This is similar to “Cannot dispatch in a middle of dispatch” error in Flux, but doesn't cause the problems associated with it. In Flux, a dispatch is forbidden while Stores are handling the action and emitting updates. This is unfortunate because it makes it impossible to dispatch actions from component lifecycle hooks or other benign places.
49-
49+
>
5050
> In Redux, subscriptions are called after the root reducer has returned the new state, so you _may_ dispatch in the subscription listeners. You are only disallowed to dispatch inside the reducers because they must have no side effects. If you want to cause a side effect in response to an action, the right place to do this is in the potentially async [action creator](../Glossary.md#action-creator).
5151
5252
#### Arguments

docs/api/combineReducers.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ You can control state key names by using different keys for the reducers in the
3434
A popular convention is to name reducers after the state slices they manage, so you can use ES6 property shorthand notation: `combineReducers({ counter, todos })`. This is equivalent to writing `combineReducers({ counter: counter, todos: todos })`.
3535

3636
> ##### A Note for Flux Users
37-
37+
>
3838
> This function helps you organize your reducers to manage their own slices of state, similar to how you would have different Flux Stores to manage different state. With Redux, there is just one store, but `combineReducers` helps you keep the same logical division between reducers.
3939
4040
#### Arguments

docs/basics/Actions.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { ADD_TODO, REMOVE_TODO } from '../actionTypes'
3131
```
3232

3333
> ##### Note on Boilerplate
34-
34+
>
3535
> You don't have to define action type constants in a separate file, or even to define them at all. For a small project, it might be easier to just use string literals for action types. However, there are some benefits to explicitly declaring constants in larger codebases. Read [Reducing Boilerplate](../recipes/ReducingBoilerplate.md) for more practical tips on keeping your codebase clean.
3636
3737
Other than `type`, the structure of an action object is really up to you. If you're interested, check out [Flux Standard Action](https://github.com/acdlite/flux-standard-action) for recommendations on how actions could be constructed.

docs/basics/Reducers.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ You'll often find that you need to store some data, as well as some UI state, in
3737
```
3838

3939
> ##### Note on Relationships
40-
40+
>
4141
> In a more complex app, you're going to want different entities to reference each other. We suggest that you keep your state as normalized as possible, without any nesting. Keep every entity in an object stored with an ID as a key, and use IDs to reference it from other entities, or lists. Think of the app's state as a database. This approach is described in [normalizr's](https://github.com/paularmstrong/normalizr) documentation in detail. For example, keeping `todosById: { id -> todo }` and `todos: array<id>` inside the state would be a better idea in a real app, but we're keeping the example simple.
4242
4343
## Handling Actions
@@ -111,13 +111,13 @@ Note that:
111111
2. **We return the previous `state` in the `default` case.** It's important to return the previous `state` for any unknown action.
112112

113113
> ##### Note on `Object.assign`
114-
114+
>
115115
> [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) is a part of ES6, and is not supported by older browsers. To support them, you will need to either use a polyfill, a [Babel plugin](https://www.npmjs.com/package/babel-plugin-transform-object-assign), or a helper from another library like [`_.assign()`](https://lodash.com/docs#assign).
116116
117117
> ##### Note on `switch` and Boilerplate
118-
118+
>
119119
> The `switch` statement is _not_ the real boilerplate. The real boilerplate of Flux is conceptual: the need to emit an update, the need to register the Store with a Dispatcher, the need for the Store to be an object (and the complications that arise when you want a universal app). Redux solves these problems by using pure reducers instead of event emitters.
120-
120+
>
121121
> It's unfortunate that many still choose a framework based on whether it uses `switch` statements in the documentation. If you don't like `switch`, you can use a custom `createReducer` function that accepts a handler map, as shown in [“reducing boilerplate”](../recipes/ReducingBoilerplate.md#reducers).
122122
123123
## Handling More Actions
@@ -379,9 +379,9 @@ function reducer(state = {}, action) {
379379
All [`combineReducers()`](../api/combineReducers.md) does is generate a function that calls your reducers **with the slices of state selected according to their keys**, and combines their results into a single object again. [It's not magic.](https://github.com/reduxjs/redux/issues/428#issuecomment-129223274) And like other reducers, `combineReducers()` does not create a new object if all of the reducers provided to it do not change state.
380380

381381
> ##### Note for ES6 Savvy Users
382-
382+
>
383383
> Because `combineReducers` expects an object, we can put all top-level reducers into a separate file, `export` each reducer function, and use `import * as reducers` to get them as an object with their names as the keys:
384-
384+
>
385385
> ```js
386386
> import { combineReducers } from 'redux'
387387
> import * as reducers from './reducers'

docs/faq/General.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,5 +94,5 @@ Redux can be used as a data store for any UI layer. The most common usage is wit
9494
Redux is originally written in ES6 and transpiled for production into ES5 with Webpack and Babel. You should be able to use it regardless of your JavaScript build process. Redux also offers a UMD build that can be used directly without any build process at all. The [counter-vanilla](https://github.com/reduxjs/redux/tree/master/examples/counter-vanilla) example demonstrates basic ES5 usage with Redux included as a `<script>` tag. As the relevant pull request says:
9595

9696
> The new Counter Vanilla example is aimed to dispel the myth that Redux requires Webpack, React, hot reloading, sagas, action creators, constants, Babel, npm, CSS modules, decorators, fluent Latin, an Egghead subscription, a PhD, or an Exceeds Expectations O.W.L. level.
97-
97+
>
9898
> Nope, it's just HTML, some artisanal `<script>` tags, and plain old DOM manipulation. Enjoy!

0 commit comments

Comments
 (0)