Proofing chapter redux (#27)

Author: kakulgupta

9-redux/9.0-intro.md

@@ -1,50 +1,51 @@
 # Redux - The State Container
 
-We assume that the reader is already aware of Redux. But just to refresh, according to redux.js.org:
+We assume that the reader is already aware of Redux. But just to recap, according to redux.js.org:
 
 > Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
 
-In a nutshell, redux is a state container. That is it will contain all our runtime application state or data.
+In a nutshell, Redux is a state container. That means, it will contain all our runtime application state or data.
 
-Redux essentially has a three parts:
-- Store - Store contains a global state for the entire app. It is basically the manager for the application state.
-- Actions - These are like the commands you pass to store along with some data to do some modifications to the stored state.
-- Reducers - Reducers are basically functions that the store calls whenever a action arrives. The reducers are the ones which determines what the new state will be based on the actions and the action payload it receives.
+Redux is essentially made up of three parts:
+- Store - The store contains a global state for the entire app. It is basically the manager of the application state.
+- Actions - These are the commands you pass to the store along with some data to modify the stored state.
+- Reducers - Reducers are functions that the store calls whenever an action arrives. The reducers determine what the new state will be based on the action and the action payload they receive.
 
 ### But we already have React's state
 
 Both Redux and React's state are used to manage the state in the application. But, both Redux and React's state are very different in the way they work and it is good to know when to use what.
 
-React state is stored locally within a component. When it needs to be shared with other components, it is passed down through the props. Hence, this means all the components which need the state data need to be the child of the component holding the value.
-But in case of Redux, state is stored globally in the Redux store. Components subscribe to the store to get access to the value. This centralizes all data but makes it very easy for a component to get the state it needs, without surrounding components knowing of its needs.
+React state is stored locally within a component. When it needs to be shared with other components, it is passed down through the props. This means that all the components which need the state data need to be children of the component holding the value.
+But in case of Redux, the state is stored globally in the Redux store. Components subscribe to the store to get access to the value. This centralizes all data and makes it very easy for a component to get the state it needs, without surrounding components being affected.
 
-So, this means that Redux is good and we should just use it for all our app state management.
+So, does this means that Redux is great and we should use it for all our app state management?
 
-**NO !**
+**NO!**
 
-While redux is helpful in some cases, it will create unnecessary indirections for simpler and trivial use cases.
-Consider that we have a text input. And since we are using redux, we decide to use redux to store all the changes in the text field in redux. In redux for changing the state on text input, we will need to create an Action, write a reducer and then subscribe our component to the store so that it re renders on every state change. This is bad! Why so much complication?
+While Redux is helpful in some cases, it will create unnecessary indirections for simpler and trivial use cases.
 
-*Dan Abramov* - The creator of redux says you might actually not need redux unless you have a plan to benefit from this additional indirection. In his blog at https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367, he clearly states that since redux introduces an additional indirection to managing the state of the application, we should use it only if it benefits us.
+Consider that we have a text input. And since we are using Redux, we decide to use Redux to store all the changes in the text field in the Redux store. In Redux, for changing the state on text input, we will need to create an Action, write a reducer and then subscribe our component to the store so that it re-renders on every state change. This is bad! Why do we need to complicate things so much?
 
-Now, lets see when we should use redux and when React's state is good enough.
+*Dan Abramov* - The creator of Redux says you might actually not need Redux unless you have a plan to benefit from this additional indirection. In his blog at https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367, he clearly states that since Redux introduces an additional indirection to managing the state of the application, we should use it only if it benefits us.
 
-One way to do this is based on Duration of the data we want to store.
-As, *Tyler Hoffman* explains in his blog post https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/,
+Now, let's see when we should use Redux and when React's state is good enough.
+
+One way to do this is based on the duration the data has to be stored.
+As *Tyler Hoffman* explains in his blog post: https://spin.atomicobject.com/2017/06/07/react-state-vs-redux-state/,
 
 Different pieces of state are persisted for different amounts of time. We can categorize data into:
 
 - **Short term**: data that will change rapidly in your app
 - **Medium term**: data that will likely persist for a while in your app
-- **Long term**: data that should last between multiple app launch.
+- **Long term**: data that should last between multiple app launches.
 
 #### Short term data
-Short term data is something that changes very quickly and is needed to be stored only for small amount of time. For example, this includes the characters that the user types in a text field. This data is not needed once the user submits the form.
-Also we will not need to mostly transfer this type of data to any other independent component. Such type of data clearly fits the use case for React's state.
+Short term data is data that changes very quickly and is needed to be stored only for small amount of time. For example, this includes the characters that a user types in a text field. This data is not needed once the user submits the form.
+Also, we will most likely not need to transfer this type of data to any other independent component. Such type of data clearly fits the use case for React's state.
 
 
 #### Medium term data
-Medium term data needs to stick around while the user navigates the app. This could be data loaded from an API, or any changes that needs to be persisted up until a page refresh. This can also contain data that needs to be used by a component that is completely unrelated to the component that produced the data. As an example, consider that one of the component makes an API call on a button click to update user's profile details. The data returned from the server needs to be stored and will be used by a completely unrelated profile screen. Now, if the data is was stored in some global location. It would be far easier to access this data.  Such type of use cases clearly fits Redux.
+Medium term data needs to stick around while the user navigates through the app. This could be data loaded from an API or any changes that need to be persisted until a page refresh. This can also contain data that needs to be used by a component that is completely unrelated to the component that produced the data. As an example, consider that one of the components makes an API call on a button click to update the user's profile details. The data returned from the server needs to be stored and will be used by a completely unrelated profile screen. Now, if the data is stored in some global location, it will be far easier to access this data. Such type of use cases clearly fits Redux.
 
 #### Long term data
-This is the data that should be persisted between refreshes of the page or when the user closes and reopens the app. Since the Redux store is created on app launch, this type of data should be stored somewhere else, for example: Async Storage in the case of React Native.
+This is the data that should be persisted between page refreshes or when the user closes and reopens the app. Since the Redux store is created on app launch, this type of data should be stored somewhere else, for example Async Storage in the case of React Native.

9-redux/9.1-redux-setup.md

@@ -1,9 +1,9 @@
 # Setting up Redux for React Native
 
-### Why redux ?
+### Why Redux?
 
-Lets say in our note taker app. We need to add the character count and a save/sync button at bottom.
-First lets create the UI component for it.
+Let's say in our note-taker app, we need to add the character count and a save/sync button at the bottom of the screen.
+First, let's create the UI component for it.
 
 Modify the files
 >app/components/Home/Home.component.js
@@ -73,18 +73,19 @@ Modify the files
  };
 ```
 
-Now our app should have a bottom bar with character count and a save button.
-Currently we have hard coded the character count to 20.
+Now our app should have a bottom bar with a character count and a save button.
+
+Currently, we have hardcoded the character count to 20.
 
 <br/>
 <div style="text-align:center">
   <img src="/assets/images/9/9.1/9.1-bottom-bar.png" style="width: 40%;display:inline-block;" hspace="40" />
 </div>
 <br/>
 
-But if you look at the app now, there is no way for us to get the character count from the TextArea component and use it as the text for character count text view.
+But if you look at the app now, there is no way for us to get the character count from the TextArea component and use it as the text for the character count text view.
 To do this we will need to **move the state present inside the TextArea component and place it in the Home component**.
-This is because all the components that need access to a state have to be the child of the component holding the state.
+This is because all the components that need access to a state have to be children of the component holding the state.
 
 So we modify our components as follows:
 >app/components/TextArea/TextArea.component.js
@@ -159,27 +160,28 @@ The character count should now update whenever you enter text on the text field.
 <br/>
 
 
-Hence, here by moving the state from the child component to parent, we were able to access it in multiple child components.
-Thus, to provide access to the data that needs to be accessed by multiple components, we need to have the state in the enclosing parent component. Thus following this principle, if we keep on moving the state to the parent component, we will end up with a state present in the top most level component.
+By moving the state from the child component to the parent, we were able to access it in multiple children components.
+
+Therefore, to provide access to the data that needs to be accessed by multiple components, we need to have the state in the enclosing parent component. Following this principle, if we keep on moving the state to the parent component, we will end up with the state in the topmost level component.
 
-Redux builds on top of similar principles. It keeps a global store to which the components which need access to the data can subscribe to. Additionally, it provides a mechanism by which these components can re-render whenever the data in the store changes.
+Redux builds on top of similar principles. It keeps a global store to which the components which need access to the data can subscribe. Additionally, it provides a mechanism by which these components can re-render whenever the data in the store changes.
 
-Now, since we are clear why redux is helpful. Lets setup redux for our app.
+Now, since we understand how Redux is helpful, let's setup Redux for our app.
 
 ### Setup
 
-Lets begin by installing few packages.
+Let's begin by installing a few packages.
 
 `yarn add redux react-redux redux-promise redux-thunk`
 
   or
 
 `npm install --save redux react-redux`
 
-- **redux** - the main redux library.
-- **react-redux** - the react bindings for redux, which makes our life easy when using redux with react.
+- **redux** - the main Redux library.
+- **react-redux** - the React bindings for Redux, which makes our life easy when using Redux with React.
 
-Additionally, you can also install your preferred redux middleware like `redux-thunk`, etc. The comments on the code specify how to do that.
+Additionally, you can also install your preferred Redux middleware like `redux-thunk`, etc. The comments on the code specify how to do that.
 
 Now create the files
 >app/redux/store.js
@@ -218,7 +220,7 @@ export default combineReducers({
 });
 ```
 
-Now, lets add our first reducer and action.
+Now, let's add our first reducer and action.
 
 
 Create the files:
@@ -247,7 +249,7 @@ const test = (state = {}, action) => {
 
 export default test;
 ```
-Now lets add our test reducer to the root reducer.
+Now let's add our test reducer to the root reducer.
 
 Modify
 >app/redux/reducers/root.reducer.js
@@ -261,7 +263,7 @@ export default combineReducers({
 });
 ```
 
-Now lets initialize the store.
+Now let's initialize the store.
 
 Modify the file:
 >app/index.js
@@ -288,7 +290,7 @@ class NoteTaker extends Component {
 export default NoteTaker;
 ```
 
-and move the Initialization of the home component to another file
+and move the initialization of the home component to another file.
 
 >app/App.container.js
 
@@ -317,23 +319,23 @@ const mapDispatchToProps = (dispatch) => ({
 export default connect(mapStateToProps, mapDispatchToProps)(App);
 ```
 
-At this point, we should a have a redux store with an initial test state from the test reducer.
+At this point, we should a have a Redux store with an initial test state from the test reducer.
 
-To check this, lets run our app on the simulator.
+To check this, let's run our app on the simulator.
 
 Now open up the debug menu on the iOS simulator by pressing `cmd+ctrl+z` or on Android emulator by using `cmd+m`.
 
 Choose `Debug JS Remotely`.
 
-This should run the app js code in react-native-debugger and if all went well we should see something like this on the console panel:
+This should run the app JS code in react-native-debugger and if all goes well we should see something like this on the console panel:
 
 <br>
 <div style="text-align:center">
   <img src="/assets/images/9/9.1/9.1-redux-setup-complete.png" style="width: 80%;display:inline-block;" hspace="20">
 </div>
 <br>
 
-This implies that our redux store successfully initialized with the test reducer.
+This implies that our Redux store is successfully initialized with the test reducer.
 
 __NOTE:__ If your tests fail due to the error `window not defined`, then add a mock file
  >\_\_mocks__/react-native.js