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

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