Improve formatting

Author: CodinCat

docs/api/applyMiddleware.md

@@ -37,7 +37,11 @@ function logger({ getState }) {
   }
 }
 
-let store = createStore(todos, ['Use Redux'], applyMiddleware(logger))
+let store = createStore(
+  todos,
+  ['Use Redux'],
+  applyMiddleware(logger)
+)
 
 store.dispatch({
   type: 'ADD_TODO',
@@ -73,6 +77,7 @@ function makeASandwich(forPerson, secretSauce) {
     secretSauce
   }
 }
+
 function apologize(fromPerson, toPerson, error) {
   return {
     type: 'APOLOGIZE',
@@ -81,35 +86,60 @@ function apologize(fromPerson, toPerson, error) {
     error
   }
 }
+
 function withdrawMoney(amount) {
   return {
     type: 'WITHDRAW',
     amount
   }
-} // Even without middleware, you can dispatch an action:
-store.dispatch(withdrawMoney(100)) // But what do you do when you need to start an asynchronous action, // such as an API call, or a router transition? // Meet thunks. // A thunk is a function that returns a function. // This is a thunk.
+}
+
+// Even without middleware, you can dispatch an action:
+store.dispatch(withdrawMoney(100))
+
+// But what do you do when you need to start an asynchronous action,
+// such as an API call, or a router transition?
+
+// Meet thunks.
+// A thunk is a function that returns a function.
+// This is a thunk.
 function makeASandwichWithSecretSauce(forPerson) {
+
   // Invert control!
   // Return a function that accepts `dispatch` so we can dispatch later.
   // Thunk middleware knows how to turn thunk async actions into actions.
-  return function(dispatch) {
+  return function (dispatch) {
     return fetchSecretSauce().then(
       sauce => dispatch(makeASandwich(forPerson, sauce)),
       error => dispatch(apologize('The Sandwich Shop', forPerson, error))
     )
   }
-} // Thunk middleware lets me dispatch thunk async actions // as if they were actions!
-store.dispatch(makeASandwichWithSecretSauce('Me')) // It even takes care to return the thunk's return value // from the dispatch, so I can chain Promises as long as I return them.
+}
+
+// Thunk middleware lets me dispatch thunk async actions
+// as if they were actions!
+store.dispatch(makeASandwichWithSecretSauce('Me'))
+
+// It even takes care to return the thunk's return value
+// from the dispatch, so I can chain Promises as long as I return them.
 store.dispatch(makeASandwichWithSecretSauce('My wife')).then(() => {
   console.log('Done!')
-}) // In fact I can write action creators that dispatch // actions and async actions from other action creators, // and I can build my control flow with Promises.
+})
+
+// In fact I can write action creators that dispatch
+// actions and async actions from other action creators,
+// and I can build my control flow with Promises.
 function makeSandwichesForEverybody() {
-  return function(dispatch, getState) {
+  return function (dispatch, getState) {
     if (!getState().sandwiches.isShopOpen) {
+
       // You don't have to return Promises, but it's a handy convention
       // so the caller can always call .then() on async dispatch result.
       return Promise.resolve()
-    } // We can dispatch both plain object actions and other thunks, // which lets us compose the asynchronous actions in a single flow.
+    }
+
+    // We can dispatch both plain object actions and other thunks,
+    // which lets us compose the asynchronous actions in a single flow.
     return dispatch(makeASandwichWithSecretSauce('My Grandma'))
       .then(() =>
         Promise.all([
@@ -126,26 +156,39 @@ function makeSandwichesForEverybody() {
         )
       )
   }
-} // This is very useful for server side rendering, because I can wait // until data is available, then synchronously render the app.
+}
+
+// This is very useful for server side rendering, because I can wait
+// until data is available, then synchronously render the app.
+
 import { renderToString } from 'react-dom/server'
+
 store
   .dispatch(makeSandwichesForEverybody())
-  .then(() => response.send(renderToString(<MyApp store={store} />))) // I can also dispatch a thunk async action from a component // any time its props change to load the missing data.
+  .then(() => response.send(renderToString(<MyApp store={store} />)))
+
+// I can also dispatch a thunk async action from a component
+// any time its props change to load the missing data.
+
 import { connect } from 'react-redux'
 import { Component } from 'react'
+
 class SandwichShop extends Component {
   componentDidMount() {
     this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))
   }
+
   componentWillReceiveProps(nextProps) {
     if (nextProps.forPerson !== this.props.forPerson) {
       this.props.dispatch(makeASandwichWithSecretSauce(nextProps.forPerson))
     }
   }
+
   render() {
     return <p>{this.props.sandwiches.join('mustard')}</p>
   }
 }
+
 export default connect(state => ({
   sandwiches: state.sandwiches
 }))(SandwichShop)
@@ -160,19 +203,19 @@ export default connect(state => ({
 * If you want to conditionally apply a middleware, make sure to only import it when it's needed:
 
   ```js
-let middleware = [a, b]
-if (process.env.NODE_ENV !== 'production') {
-  let c = require('some-debug-middleware')
-  let d = require('another-debug-middleware')
-  middleware = [...middleware, c, d]
-}
+  let middleware = [a, b]
+  if (process.env.NODE_ENV !== 'production') {
+    let c = require('some-debug-middleware')
+    let d = require('another-debug-middleware')
+    middleware = [...middleware, c, d]
+  }
 
-const store = createStore(
-  reducer,
-  preloadedState,
-  applyMiddleware(...middleware)
-)
-```
+  const store = createStore(
+    reducer,
+    preloadedState,
+    applyMiddleware(...middleware)
+  )
+  ```
 
   This makes it easier for bundling tools to cut out unneeded modules and reduces the size of your builds.
 

docs/api/compose.md

@@ -25,7 +25,10 @@ import reducer from '../reducers/index'
 
 const store = createStore(
   reducer,
-  compose(applyMiddleware(thunk), DevTools.instrument())
+  compose(
+    applyMiddleware(thunk),
+    DevTools.instrument()
+  )
 )
 ```