adding more content for steps 2-6 and 2-7

step2-06/README.md

@@ -10,9 +10,10 @@ We also see how we may compose the reducers according to the shape.
 
 # Dispatch
 
-As long as there is a store reference, you can dispatch an action to trigger the middleware and reducers which in term changes the store which in turn will cause re-renders in the view.
+As long as there is a store reference (we'll look at how to pass the store and the dispatch function into the view later), you can dispatch an action to trigger the middleware and reducers which in term changes the store which in turn will cause re-renders in the view.
 
 ```ts
+const store = createStore(redcuers);
 store.dispatch(actions.addTodo('id0', 'hello world'));
 ```
 

step2-07/README.md

@@ -2,16 +2,77 @@
 
 [Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
 
+# Redux Ecosystem
+
+Redux is the most popular Flux implementation, and the ecosystem of related libraries has grown as a result. This is one of the reason why it is a very popular library in use by many products made by Microsoft as well.
+
+There had been "awesome lists" that various github users have collected related to tech and articles about redux. Here's just one such list:
+
+https://github.com/xgrommx/awesome-redux#react---a-javascript-library-for-building-user-interfaces
+
+It is literally impossible to list out all the related tech. In this step, we introduce but one useful library that works with `redux`.
+
+# `react-redux`: the Official React Redux Binding
+
+That's right, Redux doesn't only work with React. It can be used inside Vue.js, Angular, and React Native, to name a few.
+
+## <Provider> Component
+
+The store doesn't magically get passed to the views randomly. It has to be supplied by a `react-redux` component called `<Provider>`. It can be placed anywhere, but it's best to just make it available at the root the app:
+
+```tsx
+const store = createStore(reducers);
+
+const App = () => {
+  return (
+    <Provider store={store}>
+      <div>Hello World!</div>
+    </Provider>
+  );
+};
+```
+
+## connect() higher order function
+
 Connect store to view with `react-redux`. `connect()` is used to turn Redux store and dispatch functions into props inside React components. The state and action dispatchers are passed along with a `<Provider>` component.
 
 ```ts
-const NewComponent = function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(OldComponent);
+const OldComponent = props => {
+  return <div>{props.foo}</div>;
+};
+
+const NewComponent = connect(
+  mapStateToProps,
+  mapDispatchToProps,
+  mergeProps,
+  options
+)(OldComponent);
 ```
 
 The `connect()` function takes in a few functions that maps some portion of the state tree and dispatcher functions as props. It is a **higher order function** meaning that the return value of `connect()` is a function that decorates OldComponents into a NewComponent with all the mapped props.
 
 This `mapStateToProps` function selects out portions of the state tree. This function informs the connected view when to re-render based on a shallow comparison from previous state.
 
+```ts
+function mapStateToProps(state) {
+  return {
+    foo: state.foo
+  };
+}
+```
+
+The `mapDispatchToProps` are functions that will trigger the action message dispatch mechanism of Redux. It looks like this:
+
+```ts
+function mapDispatchToProps(dispatch) {
+  return {
+    // the dispatched message COULD be generated by an
+    // action creator instead
+    addTodo: () => dispatch({ type: 'addTodo', ... })
+  }
+}
+```
+
 # Exercise
 
 1. open up `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment
@@ -23,3 +84,9 @@ This `mapStateToProps` function selects out portions of the state tree. This fun
 4. uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide
 
 5. do steps 2, 3, and 4 for the `TodoHeader.tsx` file
+
+# Bonus Exercise
+
+For further reading, go here to look up more information about the `mergeProps` and `options` parameters to `connect()`:
+
+https://react-redux.js.org/api/connect