Grammar and spelling corrections

Author: timtyrrell

04_simple-reducer.js

@@ -31,7 +31,7 @@ var store_1 = createStore(reducer)
 
 // Did you see that? our reducer is actually called even if we didn't dispatch any action...
 // That's because to initialize the state of the application,
-// Redux actually dispatch an init action ({ type: '@@redux/INIT' })
+// Redux actually dispatches an init action ({ type: '@@redux/INIT' })
 
 // When called, a reducer is given those parameters: (state, action)
 // It's then very logical that at an application initialization, the state not being yet

11_state-subscriber.js

@@ -1,6 +1,6 @@
 // Tutorial 11 - state-subscriber.js
 
-// We're close to have a complete Flux loop but we still miss one critical part:
+// We're close to having a complete Flux loop but we still miss one critical part:
 
 //  _________      _________       ___________  
 // |         |    | Change  |     |   React   |
@@ -62,12 +62,12 @@ store_0.dispatch(addItemActionCreator({ id: 1234, description: 'anything' }))
 
 // Our subscribe callback is correctly called and our store now contains the new item that we added.
 
-// Theorically speaking we could stop here. Our Flux loop is closed, we understood all concept that makes
-// Flux and we saw that it is not that much of a mystery. But to be honest, there is still a lot to talk 
-// about and few things in the last example were intentionally left aside to keep the most simplest form of this
+// Theorically speaking we could stop here. Our Flux loop is closed, we understood all concepts that make
+// Flux and we saw that it is not that much of a mystery. But to be honest, there is still a lot to talk
+// about and a few things in the last example were intentionally left aside to keep the simplest form of this
 // last Flux's concept:
 
-// - Our subscriber callback did not received the state as parameter, why?
+// - Our subscriber callback did not receive the state as a parameter, why?
 // - Since we did not received our new state, we were bound to exploit our closured store (store_0) so this
 //     solution is not acceptable in a real multi-modules application...
 // - How do we actually update our views?
@@ -76,8 +76,8 @@ store_0.dispatch(addItemActionCreator({ id: 1234, description: 'anything' }))
 
 // We're now entering a more "Redux inside React" specific domain.
 
-// It is very important to understand that Redux is by no mean bound to React. It is really a 
-// "Predictable state container for JavaScript apps" and you can use it in many ways, a React 
+// It is very important to understand that Redux is by no means bound to React. It is really a
+// "Predictable state container for JavaScript apps" and you can use it in many ways, a React
 // application just being one of them.
 
 // In that perspective we would be a bit lost if it weren't for react-redux (https://github.com/gaearon/react-redux).
@@ -88,16 +88,16 @@ store_0.dispatch(addItemActionCreator({ id: 1234, description: 'anything' }))
 // the same time also seems to not provide enough features?
 
 // It's simplicity is actually its power! Redux, with its current minimalist API (including "subscribe") is
-//  highly extensible and this allow to build some crazy product like the Redux DevTools 
+//  highly extensible and this allow to build some crazy products like the Redux DevTools
 // (https://github.com/gaearon/redux-devtools).
 
-// But in the end we still need a "better" API to subscribe to our store change. That's exactly what redux-react
+// But in the end we still need a "better" API to subscribe to our store changes. That's exactly what redux-react
 // brings us: an API that will allow us to seamlessly fill the gap between the raw Redux subscribing mechanism
 // and our developer expectations. In the end, you won't need to use "subscribe" directly. Instead you will
 // use bindings such as "provide" or "connect" and those will hide from you the "subscribe" method.
 
-// So yeah, the "subscribe" method will still be used but it will done through a higher order API that 
-// handle for you the access to redux state.
+// So yeah, the "subscribe" method will still be used but it will be done through a higher order API that
+// handles access to redux state for you.
 
 // We'll now cover those bindings and show how simple it is to wire your components to Redux's state.
 

12_Provider-and-connect.js

@@ -13,9 +13,9 @@
 // - The awesome Webpack (http://webpack.github.io/) to bundle our application,
 // - The magic Webpack Dev Server (http://webpack.github.io/docs/webpack-dev-server.html)
 //     to serve JS files from a dedicated node server that allows for files watch
-// - The incredible React Hot Loader http://gaearon.github.io/react-hot-loader/ (another awesome 
-//     project of Dan Abramov - just in case, he is Redux's author) to have a crazy 
-//     DX (Developer experience) by having our components to live-reload in browser
+// - The incredible React Hot Loader http://gaearon.github.io/react-hot-loader/ (another awesome
+//     project of Dan Abramov - just in case, he is Redux's author) to have a crazy
+//     DX (Developer experience) by having our components live-reload in the browser
 //     while we're tweaking them in our code editor.
 
 // I won't detail Webpack Dev Server and React Hot Loader setup here since it's done pretty

12_src/src/action-creators.js

@@ -4,7 +4,7 @@
 // use any promise lib you want.
 import Promise from 'bluebird'
 
-// Our action creator just get the current time in a delayd fashion to illustrate the use of the promise
+// Our action creator just gets the current time in a delayed fashion to illustrate the use of the promise
 // middleware.
 
 // The promise middleware works by waiting either:
@@ -16,7 +16,7 @@ import Promise from 'bluebird'
 //      }
 //    }
 // 2) or anything else what would be passed to the next middleware or to Redux (actually, with this
-//    implementation of the promise middleware, the "anything else" have to NOT contain a promise 
+//    implementation of the promise middleware, the "anything else" has to NOT contain a promise
 //    property to be passed to the next middleware or Redux)
 
 // When the promise middleware receives this action, it will create 2 actions from this one:
@@ -25,8 +25,8 @@ import Promise from 'bluebird'
 // Again, the code for the promise middleware is not complicated and it is worth having a look
 // at it (./promise-middleware.js)
 
-// The action is delayed by "delay" ms passed as a parameter of the action creator. Try to change 
-// this value to verify that the delay correctly impact our UI.
+// The action is delayed by "delay" ms passed as a parameter of the action creator. Try to change
+// this value to verify that the delay correctly impacts our UI.
 export function getTime(delay = 100) {
   return {
     types: ['GET_TIME_REQUEST', 'GET_TIME_SUCCESS', 'GET_TIME_FAILURE'],

12_src/src/application.jsx

@@ -4,9 +4,9 @@
 // brings to us: the Provider component.
 
 // Provider is a React Component designed to be used as a wrapper of your application's root component. Its
-// purpose is to provide your redux instance to all your application's components. How it does that does not
-// really matters to us but just to let you know, it's using React's context feature (it's undocumented so you
-// don't have to know about it but if you're curious:
+// purpose is to provide your redux instance to all of your application's components. How it does that does not
+// really matter to us but just to let you know, it's using React's context feature (it's undocumented so you
+// don't have to know about it, but if you're curious:
 // https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html).
 
 import React from 'react'
@@ -17,11 +17,11 @@ export default class Application extends React.Component {
   render () {
     return (
       // As explained above, the Provider must wrap your application's Root component. This way,
-      // this component and all of its children (even deeply nested ones) will have access to your 
-      // Redux store. Of course, to allow Provider do do that, you must give to him the store
-      // you built precedently (via a "store" props).
+      // this component and all of its children (even deeply nested ones) will have access to your
+      // Redux store. Of course, to allow Provider to do that, you must give to him the store
+      // you built previously (via a "store" props).
       // That's almost all there is to say about Provider... One last word though:
-      // You'll notice in the code above that Provider needs to have as its child, a function that return
+      // You'll notice in the code above that Provider needs to have as its child, a function that returns
       // the root component instead of the component itself. This is a temporary API until React 0.14 comes
       // out, to fix a React 0.13 context issue.
       <Provider store={ this.props.store }>

12_src/src/create-store.js

@@ -6,24 +6,24 @@
 // One thing to notice though: we're not using the thunk middleware that we've seen before. Instead
 // we use a promise middleware solution that will allow us to handle asynchronous action creators and
 // to do some nice real time updates on our UI (could also be some optimistic updates).
-// This middleware was discussed here:  https://github.com/gaearon/redux/issues/99 and it is used 
+// This middleware was discussed here:  https://github.com/gaearon/redux/issues/99 and it is used
 // in this very good react-redux-universal-example: https://github.com/erikras/react-redux-universal-hot-example
 // that I strongly suggest you get a look at (later, not right now ;)).
 
 import { createStore, applyMiddleware, combineReducers } from 'redux'
-// You can go and see code for this middleware, it's not very complicated and make a good
+// You can go and see code for this middleware, it's not very complicated and makes a good
 // excercise to sharpen your understanding on middlewares.
 import promiseMiddleware from './promise-middleware'
-// We'll just have one reducer in this application but the ES6 import notation below is 
+// We'll just have one reducer in this application but the ES6 import notation below is
 // pretty interesting to import and produce a reducers hash in one go. Have a look in
 // ./reducers.js to see what our reducer actually do (no magic there).
 import * as reducers from './reducers'
 
 // The data parameter that we see here is used to initialize our redux store with data. This was
-// not spoken of yet for simplicity but it is thanks to that, that your reducers can be initialized
-// with real data if you already have some. For example in an isomorphic/universal app where you 
-// fetched data server-side, serialized and passed them to the client, your Redux store can be 
-// initialized with those data.
+// not spoken of yet for simplicity but thanks to it your reducers can be initialized
+// with real data if you already have some. For example in an isomorphic/universal app where you
+// fetch data server-side, serialize and pass it to the client, your Redux store can be
+// initialized with that data.
 // We're not passing any data here but it's good that you know of this createStore's ability.
 export default function(data) {
   var reducer = combineReducers(reducers)

12_src/src/home.jsx

@@ -8,25 +8,25 @@
 // As we explained previously, when using the Provider component, we allow all components of our app to
 // access Redux. But this access can only be made through the undocumented feature "React's context". To
 // avoid asking you to use such "dark" React API, Redux is exposing a decorator (an ES7 feature that
-// make it possible to annotate and modify classes and properties at design time - 
+// makes it possible to annotate and modify classes and properties at design time -
 // https://github.com/wycats/javascript-decorators) that you can use on a component class.
 
-// The "connect" decorator litteraly connects your component with your Redux's store. By doing so,
-// it provides your store's dispatch function through a component's prop and  add also any 
+// The "connect" decorator literally connects your component with your Redux's store. By doing so,
+// it provides your store's dispatch function through a component's prop and also adds any
 // properties you want to expose part of your store's state.
 
 // Using @connect, you'll turn a dumb component (https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0),
 // into a smart component with very little code overhead.
 
 import React from 'react'
 import { connect } from 'react-redux'
-// We use the same ES6 import trick to get all action creators and produce a hash than we did with
+// We use the same ES6 import trick to get all action creators and produce a hash like we did with
 // our reducers. If you haven't yet, go get a look at our action creator (./actions-creator.js).
 import * as actionCreators from './action-creators'
 
-// The "connect" decorator takes as only parameter, a function that will select which slice of your
-// state you want to expose to you component. This function is logically called a "selector" and 
-// receive 2 parameters: the state of your store and the current props of your component.
+// The "connect" decorator takes as its only parameter, a function that will select which slice of your
+// state you want to expose to your component. This function is logically called a "selector" and
+// receives 2 parameters: the state of your store and the current props of your component.
 // The props of the component are provided to handle common case like extracting a slice of your
 // state depending on a prop value (Ex: state.items[props.someID]).
 @connect((state /*, props*/) => {
@@ -40,13 +40,13 @@ import * as actionCreators from './action-creators'
 })
 export default class Home extends React.Component {
   onTimeButtonClick () {
-    // This button handler is the one that will dispatch an action in response to a
+    // This button handler will dispatch an action in response to a
     // click event from a user. We use here the dispatch function provided by @connect in a prop.
     this.props.dispatch(actionCreators.getTime())
   }
   render () {
 
-    // Thanks to our @connect decorator, we're able to get through props, data previously selected.
+    // Thanks to our @connect decorator, we're able to get the data previously selected through the props.
     var { frozen, time, reduxState } = this.props
     var attrs = {}
 

12_src/src/index.jsx

@@ -1,7 +1,7 @@
 // Tutorial 12 - Provider-and-connect.js
 
 // This file is the entry point of our JS bundle. It's here that we'll create our Redux store,
-// instanciate our React Application root component and attach it to the DOM.
+// instantiate our React Application root component and attach it to the DOM.
 
 import React from 'react'
 // All store creation specific code is located in ./create-store.js
@@ -10,8 +10,8 @@ import createStore from './create-store'
 import Application from './application'
 
 // Just as we did so many times in previous examples, we need to create our redux instance. This time
-// all code for that task was moved to a specific module that return a single function to trigger the
-// initialisation.
+// all code for that task was moved to a specific module that returns a single function to trigger the
+// instantiation.
 const store = createStore()
 
 // Now, time to render our application to the DOM...

12_src/src/reducers.js

@@ -1,8 +1,8 @@
 // Tutorial 12 - Provider-and-connect.js
 
-// This file holds the one an only reducer of our application. Its behavior is nothing new to you
-// except maybe its handling of three aspect of an action (GET_TIME) that become 3 dedicated actions...
-// This approach allows us to do some nice real time update on our UI like this:
+// This file holds the one and only reducer of our application. Its behavior is nothing new to you
+// except maybe its handling of three aspects of an action (GET_TIME) that become 3 dedicated actions...
+// This approach allows us to do some nice real time updates in our UI like this:
 // 1) When we receive GET_TIME_REQUEST action, we modify the state to say that some part of the
 //    UI should be frozen (because there is a pending operation)
 // 2) When we receive GET_TIME_SUCCESS (or GET_TIME_FAILURE) later on, we modify the state to