adding documentation

2026-01-26 14:56:42 +08:00 · 2019-02-23 07:56:29 -08:00
parent 672099ccdd
commit 221485a940
59 changed files with 3448 additions and 102 deletions
--- a/docs/step2-08/README.md
+++ b/docs/step2-08/README.md
@@ -0,0 +1,70 @@
+# Step 2.8
+
+[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
+
+Combine Reducers
+
+This lesson is just a helper to make the process of writing reducers use less boilerplate code. This step briefly introduces to a world of helpers in writing Redux code.
+
+Our Redux store so far has this shape, roughly:
+
+```js
+const state = {
+  todos: {
+    id0: {
+      label: 'hello',
+      completed: false
+    },
+    id1: {
+      label: 'world',
+      completed: true
+    }
+  },
+
+  filter: 'all'
+};
+```
+
+As the application grows in complexity, so will the shape of the store. Currently, the store captures two separate but related ideas: the todo items and the selected filter. The reducers should follow the shape of the store. Think of reducers as part of the store itself and are responsible to update a single part of the store based on actions that they receive as a second argument. As complexity of state grows, we split these reducers:
+
+```ts
+function todoReducer(state: Store['todos'] = {}, action: any) {
+  // reduce on the todos part of the state tree
+}
+
+function filterReducer(state: Store['filter'] = 'all', action: any) {
+  // reduce on the filter flag
+}
+
+// Then use the redux-provided combineReducers() to combine them
+export const reducer = combineReducers({
+  todos: todoReducer,
+  filter: filterReducer
+});
+```
+
+# Take a peek at useful helpers and middleware created by community are:
+
+- immer: https://github.com/mweststrate/immer - improves ergonomics of working with immutables by introducing the concept of mutating a draft
+
+- redux-starter-kit: https://github.com/reduxjs/redux-starter-kit - help address common concerns of Redux in boilerplate and complexity
+
+# Exercise
+
+1. open up `exercise/src/reducers/index.ts`
+
+2. implement the `filterReducer` function with a switch / case statement - it is contrived to have a switch case for ONE condition, but serves to be a good exercise here
+
+3. replace the export reducer function with the help of the `combineReducer()` function from `redux`
+
+# Bonus Exercise
+
+The Redux team came up with `redux-starter-kit` to address a lot of boilerplate concerns. They also embed the immer library to make it nicer to write reducer functions. So, let's try out `immer`! Look at this example: https://github.com/mweststrate/immer#reducer-example
+
+1. import immer into the `exercise/src/reducers/pureFunction.ts` file
+
+2. replace the implementation of the pure functions with the help of immer's `produce()`
+
+3. run `npm test` in the root folder to see if it still works!
+
+4. look at the web app to make sure it still works!
--- a/docs/step2-08/demo/index.html
+++ b/docs/step2-08/demo/index.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html>
-  <body>
+  <head>
+    <link rel="stylesheet" href="../../assets/step.css" />
+  </head>
+  <body class="ms-Fabric">
+    <div id="markdownReadme"></div>
    <div id="app"></div>
-  <script src="../../step2-08/demo/step2-08/demo.js"></script></body>
+  <script src="../../step2-08/demo/step2-08/demo.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body>
 </html>
--- a/docs/step2-08/demo/step2-08/demo.js
+++ b/docs/step2-08/demo/step2-08/demo.js
--- a/docs/step2-08/exercise/index.html
+++ b/docs/step2-08/exercise/index.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html>
-  <body>
+  <head>
+    <link rel="stylesheet" href="../../assets/step.css" />
+  </head>
+  <body class="ms-Fabric">
+    <div id="markdownReadme"></div>
    <div id="app"></div>
-  <script src="../../step2-08/exercise/step2-08/exercise.js"></script></body>
+  <script src="../../step2-08/exercise/step2-08/exercise.js"></script><script src="../../markdownReadme/markdownReadme.js"></script></body>
 </html>
--- a/docs/step2-08/exercise/step2-08/exercise.js
+++ b/docs/step2-08/exercise/step2-08/exercise.js