added some notes to step2-06

step2-06/README.md

@@ -8,9 +8,6 @@ In this step, we learn about `dispatch` and `getState()`. Dispatching action mes
 
 We also see how we may compose the reducers according to the shape.
 
-If you want a really neat UI to show what the store looks when actions are dispatched to the store, use this Chrome extension:
-https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
-
 # 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.
@@ -21,6 +18,40 @@ store.dispatch(actions.addTodo('id0', 'hello world'));
 
 > Note: It is important to note that dispatches in general have a "fire and forget" approach. We expect React to re-render the UI correct on its own accord. Rendering isn't necessarily synchronous in React!
 
+# Reducers scoped to a portion of the state tree
+
+In general, when an application grows so does the complexity of the state tree. In a Redux application, it is best to have reducers that deal with only a subportion of the tree. In our example, we have two parts of our state: `todos` and `filter`. We will split the reducer to pass the todos to a `todosReducer()` function and just return `all` to the `filter` key for now. This reducer organization helps in navigating the reducers because it matches the shape of the state one to one.
+
+```ts
+// remember the shape of the store
+{
+  todos: {
+    id0: {...},
+    id1: {...},
+  },
+
+  filter: 'all'
+}
+```
+
+Compare this with the reducer organization
+
+```ts
+function reducers(state, action) {
+  return {
+    todos: function todoReducers(state['todos'], action) {
+      ...
+    },
+
+    filter: function filterReducers(state['filter'], action) {
+      ...
+    }
+  }
+}
+```
+
+In this way, it is very predictable which reducer changed the part of the state.
+
 # `getState()`
 
 To examine the state of the store, you can call `getState()` to get the current snapshot of the state.
@@ -29,7 +60,17 @@ To examine the state of the store, you can call `getState()` to get the current
 store.getState();
 ```
 
-The Chrome / Firefox extension is a work of genius! It lets you replay actions and step backwards to debug the current state of Redux. In a large enough application, this kind of debuggability is invaluable! It also helps developers that are not immediately familiar with your application to quickly get a handle on how the state changes over some actions.
+## Discussion
+
+`getState()` will return a snapshot of the current state. The guidance is that we don't store anything other than serializable things here so that you can easily save it and transfer it. You can even save this state into a browser localstorage and restore for the next boot of your application!
+
+# Visualizing the Reducer and Store Change
+
+If you want a really neat UI to show what the store looks when actions are dispatched to the store, use this Chrome extension:
+
+https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
+
+The Chrome / Firefox Redux dev tools extension is a work of genius! It lets you replay actions and step backwards to debug the current state of Redux. In a large enough application, this kind of debuggability is invaluable. It also helps developers that are not immediately familiar with your application to quickly get a handle on how the state changes over some actions.
 
 # Exercise
 
@@ -37,9 +78,9 @@ The Chrome / Firefox extension is a work of genius! It lets you replay actions a
 
 1. Install [Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
 
-2. Open the inspector panel entitled **Redux**
+2. Hit F12, open the inspector panel entitled **Redux**
 
-3. Modify `exercise/src/index.tsx` to dispatch actions
+3. Modify `exercise/src/index.tsx` to dispatch actions (you're not limited to adding, you can also remove, and clear)
 
 ## Playing with dispatching actions inside tests