Merge pull request redux-saga#289 from billyjanitsch/style-cleanup

Clean up docs style

README.md

@@ -1,60 +1,39 @@
 # redux-saga
 
-[![Join the chat at https://gitter.im/yelouafi/redux-saga](https://badges.gitter.im/yelouafi/redux-saga.svg)](https://gitter.im/yelouafi/redux-saga?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
- [![npm version](https://img.shields.io/npm/v/redux-saga.svg?style=flat-square)](https://www.npmjs.com/package/redux-saga)
+[![Join the chat at https://gitter.im/yelouafi/redux-saga](https://badges.gitter.im/yelouafi/redux-saga.svg)](https://gitter.im/yelouafi/redux-saga?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![npm version](https://img.shields.io/npm/v/redux-saga.svg?style=flat-square)](https://www.npmjs.com/package/redux-saga)
 
-An alternative Side Effects middleware (aka Asynchronous Actions) for Redux applications.
-Instead of dispatching Thunks which get handled by the `redux-thunk` middleware, you
-create *Sagas* to gather all your Side Effects logic in a central place.
+An alternative Side Effects middleware (aka Asynchronous Actions) for Redux applications. Instead of dispatching Thunks which get handled by the `redux-thunk` middleware, you create *Sagas* to gather all your Side Effects logic in a central place.
 
 This means application logic lives in 2 places:
 
 - Reducers are responsible for handling state transitions between actions.
-
 - Sagas are responsible for orchestrating complex/asynchronous operations.
 
-Sagas are created using Generator functions. If you're not familiar with them you may find
-[some useful links here.](http://yelouafi.github.io/redux-saga/docs/ExternalResources.html)
+Sagas are created using Generator functions. If you're not familiar with them you may find [some useful links here.](http://yelouafi.github.io/redux-saga/docs/ExternalResources.html)
 
-Unlike Thunks which get invoked on every action by Action Creators, Sagas are fired only
-once at the start of the application (but startup Sagas may fire other Sagas dynamically).
-They can be seen as Processes running in the background. Sagas watch the actions dispatched
-to the Store, then decide what to do based on dispatched actions: Either making an asynchronous
-call (like an AJAX request), dispatching other actions to the Store, or even starting other
-Sagas dynamically.
+Unlike Thunks which get invoked on every action by Action Creators, Sagas are fired only once at the start of the application (but startup Sagas may fire other Sagas dynamically). They can be seen as Processes running in the background. Sagas watch the actions dispatched to the Store, then decide what to do based on dispatched actions: Either making an asynchronous call (like an AJAX request), dispatching other actions to the Store, or even starting other Sagas dynamically.
 
-In `redux-saga` all the above tasks are achieved by yielding **Effects**. Effects are simply
-JavaScript Objects containing instructions to be executed by the Saga middleware (As an analogy,
-you can see Redux actions as Objects containing instructions to be executed by the Store).
-`redux-saga` provides Effect creators for various tasks like calling an asynchronous function,
-dispatching an action to the Store, starting a background task or waiting for a future action
-that satisfies a certain condition.
+In `redux-saga` all the above tasks are achieved by yielding **Effects**. Effects are simply JavaScript Objects containing instructions to be executed by the Saga middleware (As an analogy, you can see Redux actions as Objects containing instructions to be executed by the Store). `redux-saga` provides Effect creators for various tasks like calling an asynchronous function, dispatching an action to the Store, starting a background task or waiting for a future action that satisfies a certain condition.
 
-Using Generators, `redux-saga` allows you to write your asynchronous code in a simple
-synchronous style. Just like you can do with `async/await` functions. But Generators
-allow some things that aren't possible with `async` functions.
+Using Generators, `redux-saga` allows you to write your asynchronous code in a simple synchronous style. Just like you can do with `async/await` functions. But Generators allow some things that aren't possible with `async` functions.
 
-The fact that Sagas yield plain Objects makes it easy to test all the logic inside your Generator
-by simply iterating over the yielded Objects and doing simple equality tests.
+The fact that Sagas yield plain Objects makes it easy to test all the logic inside your Generator by simply iterating over the yielded Objects and doing simple equality tests.
 
-Furthermore, tasks started in `redux-saga` can be cancelled at any moment either manually
-or automatically by putting them in a race with other Effects.
+Furthermore, tasks started in `redux-saga` can be cancelled at any moment either manually or automatically by putting them in a race with other Effects.
 
 # Getting started
 
 ## Install
 
-```
-npm install --save redux-saga
+```sh
+$ npm install --save redux-saga
 ```
 
-Alternatively, you may use the provided UMD builds directly in the `<script>` tag of
-an HTML page. See [this section.](#using-umd-build-in-the-browser)
+Alternatively, you may use the provided UMD builds directly in the `<script>` tag of an HTML page. See [this section](#using-umd-build-in-the-browser).
 
 ## Usage Example
 
-Suppose we have an UI to fetch some user data from a remote server when a button is clicked
-(For brevity, we'll just show the action triggering code).
+Suppose we have an UI to fetch some user data from a remote server when a button is clicked. (For brevity, we'll just show the action triggering code.)
 
 ```javascript
 class UserComponent extends React.Component {
@@ -67,17 +46,16 @@ class UserComponent extends React.Component {
 }
 ```
 
-The Component dispatches a plain Object action to the Store. We'll create a Saga that
-watches for all `USER_FETCH_REQUESTED` actions and triggers an API call to fetch the
-user data.
+The Component dispatches a plain Object action to the Store. We'll create a Saga that watches for all `USER_FETCH_REQUESTED` actions and triggers an API call to fetch the user data.
 
 #### `sagas.js`
+
 ```javascript
 import { takeEvery, takeLatest } from 'redux-saga'
 import { call, put } from 'redux-saga/effects'
 import Api from '...'
 
-// worker Saga : will be fired on USER_FETCH_REQUESTED actions
+// worker Saga: will be fired on USER_FETCH_REQUESTED actions
 function* fetchUser(action) {
    try {
       const user = yield call(Api.fetchUser, action.payload.userId);
@@ -88,19 +66,19 @@ function* fetchUser(action) {
 }
 
 /*
-  starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action
-  Allow concurrent fetches of user
+  Starts fetchUser on each dispatched `USER_FETCH_REQUESTED` action.
+  Allows concurrent fetches of user.
 */
 function* mySaga() {
   yield* takeEvery("USER_FETCH_REQUESTED", fetchUser);
 }
 
 /*
-  Alternatively you may use takeLatest
+  Alternatively you may use takeLatest.
 
-  Do not allow concurrent fetches of user, If "USER_FETCH_REQUESTED" gets
+  Does not allow concurrent fetches of user. If "USER_FETCH_REQUESTED" gets
   dispatched while a fetch is already pending, that pending fetch is cancelled
-  and only the latest one will be run
+  and only the latest one will be run.
 */
 function* mySaga() {
   yield* takeLatest("USER_FETCH_REQUESTED", fetchUser);
@@ -110,6 +88,7 @@ function* mySaga() {
 To run our Saga, we'll have to connect it to the Redux Store using the `redux-saga` middleware.
 
 #### `main.js`
+
 ```javascript
 import { createStore, applyMiddleware } from 'redux'
 import createSagaMiddleware from 'redux-saga'
@@ -144,8 +123,7 @@ sagaMiddleware.run(mySaga)
 
 # Using umd build in the browser
 
-There's also an **umd** build of `redux-saga` available in the `dist/` folder. When using the umd build
-`redux-saga` is available as `ReduxSaga` in the window object.
+There is also a **umd** build of `redux-saga` available in the `dist/` folder. When using the umd build `redux-saga` is available as `ReduxSaga` in the window object.
 
 The umd version is useful if you don't use Webpack or Browserify. You can access it directly from [npmcdn](npmcdn.com).
 
@@ -154,10 +132,7 @@ The following builds are available:
 - [https://npmcdn.com/redux-saga/dist/redux-saga.js](https://npmcdn.com/redux-saga/dist/redux-saga.js)  
 - [https://npmcdn.com/redux-saga/dist/redux-saga.min.js](https://npmcdn.com/redux-saga/dist/redux-saga.min.js)
 
-**Important!** If the browser you are targeting doesn't support _es2015 generators_ you must provide a valid polyfill,
-for example the one provided by *babel*:
-[browser-polyfill.min.js](https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js).
-The polyfill must be imported before **redux-saga**.
+**Important!** If the browser you are targeting doesn't support *ES2015 generators*, you must provide a valid polyfill, such as [the one provided by `babel`](https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js). The polyfill must be imported before **redux-saga**:
 
 ```javascript
 import 'babel-polyfill'
@@ -167,69 +142,67 @@ import sagaMiddleware from 'redux-saga'
 
 # Building examples from sources
 
-```
-git clone https://github.com/yelouafi/redux-saga.git
-cd redux-saga
-npm install
-npm test
+```sh
+$ git clone https://github.com/yelouafi/redux-saga.git
+$ cd redux-saga
+$ npm install
+$ npm test
 ```
 
 Below are the examples ported (so far) from the Redux repos.
 
 ### Counter examples
 
-There are 3 counter examples.
+There are three counter examples.
 
 #### counter-vanilla
 
-Demo using vanilla JavaScript and UMD builds. All source is inlined in `index.html`
+Demo using vanilla JavaScript and UMD builds. All source is inlined in `index.html`.
 
 To launch the example, just open `index.html` in your browser.
 
->Important
-Your browser must support Generators. Latest versions of Chrome/Firefox/Edge are suitable.
-
+> Important: your browser must support Generators. Latest versions of Chrome/Firefox/Edge are suitable.
 
 #### counter
 
-Demo using webpack and high level API `takeEvery`
+Demo using `webpack` and high-level API `takeEvery`.
 
-```
-npm run counter
+```sh
+$ npm run counter
 
-// test sample for the generator
-npm run test-counter
+# test sample for the generator
+$ npm run test-counter
 ```
 
 #### cancellable-counter
 
-Demo using low level API. Demonstrate task cancellation.
+Demo using low-level API to demonstrate task cancellation.
 
-```
-npm run cancellable-counter
+```sh
+$ npm run cancellable-counter
 ```
 
 ### Shopping Cart example
 
-```
-npm run shop
+```sh
+$ npm run shop
 
-// test sample for the generator
-npm run test-shop
+# test sample for the generator
+$ npm run test-shop
 ```
 
 ### async example
 
-```
-npm run async
+```sh
+$ npm run async
 
-//sorry, no tests yet
+# sorry, no tests yet
 ```
 
 ### real-world example (with webpack hot reloading)
 
-```
-npm run real-world
+```sh
+$ npm run real-world
 
-//sorry, no tests yet
+# sorry, no tests yet
 ```

docs/ExternalResources.md

@@ -2,20 +2,15 @@
 
 ### Articles on Generators
 
-- [The Basics Of ES6 Generators](https://davidwalsh.name/es6-generators) By Kyle Simpson
-- [ES6 generators in depth](http://www.2ality.com/2015/03/es6-generators.html) By Axel Rauschmayer
+- [The Basics Of ES6 Generators](https://davidwalsh.name/es6-generators) by Kyle Simpson
+- [ES6 generators in depth](http://www.2ality.com/2015/03/es6-generators.html) by Axel Rauschmayer
 
 ### Articles on redux-saga
 
-- [Redux nowadays : From actions creators to sagas](http://riadbenguella.com/from-actions-creators-to-sagas-redux-upgraded/)
-By Riad Benguella
-- [Managing Side Effects In React + Redux Using Sagas](http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/)
-By Jack Hsu
-- [Using redux-saga To Simplify Your Growing React Native Codebase](https://medium.com/infinite-red/using-redux-saga-to-simplify-your-growing-react-native-codebase-2b8036f650de#.7wl4wr1tk)
-By Steve Kellock
-- [Master Complex Redux Workflows with Sagas](http://konkle.us/master-complex-redux-workflows-with-sagas/)
-By Brandon Konkle
-- [Handling async in Redux with Sagas](http://wecodetheweb.com/2016/01/23/handling-async-in-redux-with-sagas/)
-By Niels Gerritsen
-- [Tips to handle Authentication in Redux](https://medium.com/@MattiaManzati/tips-to-handle-authentication-in-redux-2-introducing-redux-saga-130d6872fbe7#.g49x2gj1g) By Mattia Manzati
-- [Build an Image Gallery Using React, Redux and redux-saga](http://joelhooks.com/blog/2016/03/20/build-an-image-gallery-using-redux-saga/?utm_content=bufferbadc3&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) By Joel Hooks
+- [Redux nowadays: From actions creators to sagas](http://riadbenguella.com/from-actions-creators-to-sagas-redux-upgraded/) by Riad Benguella
+- [Managing Side Effects In React + Redux Using Sagas](http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/) by Jack Hsu
+- [Using redux-saga To Simplify Your Growing React Native Codebase](https://medium.com/infinite-red/using-redux-saga-to-simplify-your-growing-react-native-codebase-2b8036f650de#.7wl4wr1tk) by Steve Kellock
+- [Master Complex Redux Workflows with Sagas](http://konkle.us/master-complex-redux-workflows-with-sagas/) by Brandon Konkle
+- [Handling async in Redux with Sagas](http://wecodetheweb.com/2016/01/23/handling-async-in-redux-with-sagas/) by Niels Gerritsen
+- [Tips to handle Authentication in Redux](https://medium.com/@MattiaManzati/tips-to-handle-authentication-in-redux-2-introducing-redux-saga-130d6872fbe7#.g49x2gj1g) by Mattia Manzati
+- [Build an Image Gallery Using React, Redux and redux-saga](http://joelhooks.com/blog/2016/03/20/build-an-image-gallery-using-redux-saga/?utm_content=bufferbadc3&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) by Joel Hooks

docs/Glossary.md

@@ -38,7 +38,7 @@ function* saga() {
   yield call(ApiFn, ...args)      // Blocking: will wait for ApiFn (If ApiFn returns a Promise)
   yield call(otherSaga, ...args)  // Blocking: will wait for otherSaga to terminate
 
-  yied put(...)                   // Blocking: will dispatch asynchronously (using Promis.then)
+  yield put(...)                   // Blocking: will dispatch asynchronously (using Promise.then)
 
   const task = yield fork(otherSaga, ...args)  // Non-blocking: will not wait for otherSaga
   yield cancel(task)                           // Non-blocking: will resume immediately
@@ -59,7 +59,7 @@ example
 
 ```javascript
 function* watcher() {
-  while(true) {
+  while (true) {
     const action = yield take(ACTION)
     yield fork(worker, action.paylaod)
   }

docs/Troubleshooting.md

@@ -64,7 +64,7 @@ function* mySaga() {
 generator will delegate all its `next()` calls to the returned iterator. This means any call to
 `next()` of `mySaga` will forward to `next()` of the `takeEvery(...)` iterator. And only after the
 the `takeEvery(...)` iterator is done, the call to the second `yield* takeEvery(ACTION_2, doSomeWork)`
-will proceed (since `takeEvery(...)` is executing a `while(true) {...}` under the hoods. The
+will proceed (since `takeEvery(...)` is executing a `while (true) {...}` under the hoods. The
 first iterator will never terminate so the second call will never proceed).
 
 With the parallel form `yield [takeEvery(...), ...]` The middleware will run all the returned
@@ -79,7 +79,7 @@ For example, consider this example
 
 ```javascript
 function watchRequestActions() {
-  while(true) {
+  while (true) {
     const {url, params} = yield take('REQUEST')
     yield call(handleRequestAction, url, params) // The Saga will block here
   }
@@ -116,7 +116,7 @@ To avoid blocking the Saga, you can use a **non-blocking call** using `fork` ins
 
 ```javascript
 function watchRequestActions() {
-  while(true) {
+  while (true) {
     const {url, params} = yield take('REQUEST')
     yield fork(handleRequestAction, url, params) // The Saga will resume immediately
   }