step 6 outline

ShMcK · ShMcK · commit 7cdb67c33978 · 2016-08-02T16:14:05.000-07:00
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.
 <!-- @import('02') -->
 <!-- @import('03') -->
 <!-- @import('04') -->
-<!-- @import('06') -->
+<!-- @import('05') -->
 <!-- @import('07') -->
 <!-- @import('08') -->
 <!-- @import('09') -->
@@ -28,21 +28,6 @@ CodeRoad is an open-sourced interactive tutorial platform for the Atom Editor. L
 
 ## Outline
 
-##### Pure Functions
+##### Combine Reducers
 
-Reducers must be pure functions
-
-State is "read only".
-
-Notes
-```js
-const nextPokemon = state.pokemon.map(p => {
-    if (id === p.id) {
-      p.votes += 1;
-    }
-    return p;
-  });
-  return {
-   pokemon: nextPokemon
- };
- ```
+Create modular, composable reducers.
diff --git a/coderoad.json b/coderoad.json
@@ -1,36 +1,66 @@
 {
   "info": {
     "title": "CodeRoad Redux JS Tutorial",
-    "description": "A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.\n\n<!-- @import('01') -->\n<!-- @import('02') -->\n<!-- @import('03') -->\n<!-- @import('04') -->\n<!-- @import('06') -->\n<!-- @import('07') -->\n<!-- @import('08') -->\n<!-- @import('09') -->"
+    "description": "A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.\n\n<!-- @import('01') -->\n<!-- @import('02') -->\n<!-- @import('03') -->\n<!-- @import('04') -->\n<!-- @import('05') -->\n<!-- @import('07') -->\n<!-- @import('08') -->\n<!-- @import('09') -->"
   },
   "pages": [
     {
-      "title": "Pure Functions",
-      "description": "Reducers must be pure functions\n\nState is \"read only\".\n\nNotes\n```js\nconst nextPokemon = state.pokemon.map(p => {\n    if (id === p.id) {\n      p.votes += 1;\n    }\n    return p;\n  });\n  return {\n   pokemon: nextPokemon\n };\n ```",
+      "title": "Combine Reducers",
+      "description": "Create modular, composable reducers.",
       "tasks": [
         {
-          "description": "Return a new list of Pokemon after incrementing \"votes\" of the pokemon with the matching \"id\"",
+          "description": "import `combineReducers` from redux",
           "tests": [
-            "05/01"
+            "06/01"
+          ],
+          "hints": [
+            "Try this: `import { combineReducers } from 'redux';`"
           ]
         },
         {
-          "description": "Let's make a test to see that we are truly returning a new state. Wrap your `initialState` object in a `Object.freeze`. Freeze makes an object unchangeable. And yet your reducer should still work.",
+          "description": "create a new `const reducers` and set it to \"reducer\". Pass \"reducers\" into your store for now, instead of \"reducer\". We'll use combineReducers shortly, but let's not break the app yet.",
           "tests": [
-            "05/02"
+            "06/02"
           ]
         },
         {
-          "description": "What if we were dealing with multiple keys on the state. We'd have to ensure that our changes return a complete new state each time. Use `Object.assign`",
+          "description": "We're going to create more than one reducer. They can't all be called \"reducer\", so rename your reducer 'pokemon'.",
           "tests": [
-            "05/03"
-          ],
-          "hints": [
-            "return `Object.assign({}, { pokemon: nextPokemon });`"
+            "06/03"
+          ]
+        },
+        {
+          "description": "combineReducers(), and pass in your reducer ({ pokemon })",
+          "tests": [
+            "06/04"
+          ]
+        },
+        {
+          "description": "create a \"defaultPokemon\" state",
+          "tests": [
+            "06/05"
+          ]
+        },
+        {
+          "description": "set the initial state of the store to an empty object",
+          "tests": [
+            "06/06"
+          ]
+        },
+        {
+          "description": "pass the default state into the pokemon reducer",
+          "tests": [
+            "06/07"
+          ]
+        },
+        {
+          "description": "We no longer pass the entire \"state\" inside of our reducers, only the slice of our state the reducer needs to know. Rename all references to \"state\" inside of your \"pokemon\" reducer to what it really is now: \"pokemon\".",
+          "tests": [
+            "06/08"
           ]
         }
       ],
-      "onPageComplete": "Now that you have an idea of how reducers work. Next we can look at how to create multiple, modular reducers."
+      "onPageComplete": "The state remains the same as before, but now"
     }
   ]
 }
diff --git a/tutorial/06/01.js b/tutorial/06/01.js
@@ -0,0 +1,11 @@
+var expect = require('chai').expect;
+
+/// load('index.js')
+
+describe('01 combineReducers', () => {
+
+  it('should be loaded', () => {
+    expect(combineReducers).to.be.defined;
+  });
+
+});
diff --git a/tutorial/06/02.js b/tutorial/06/02.js
@@ -0,0 +1,13 @@
+describe('02 reducers', () => {
+
+  it('doesn\'t exist', () => {
+    expect(reducers).to.be.defined;
+  });
+
+  it('should be set to "reducer"', () => {
+    if (process.env.TASK_POSITION === '2') {
+      expect(reducers).to.equal(reducer);
+    }
+  });
+
+});
diff --git a/tutorial/06/03.js b/tutorial/06/03.js
@@ -0,0 +1,8 @@
+describe('03 reducer', () => {
+
+  it('should be renamed "pokemon"', () => {
+    expect(reducer).not.to.be.defined;
+    expect(pokemon).to.be.defined;
+  });
+
+});
diff --git a/tutorial/06/04.js b/tutorial/06/04.js
@@ -0,0 +1,11 @@
+describe('04 reducers', () => {
+
+  it('should be a new const', () => {
+    expect(reducers).to.be.defined;
+  });
+
+  it('should call "combineReducers" with { pokemon }', () => {
+    // expect(reducers)
+  });
+
+});
diff --git a/tutorial/06/05.js b/tutorial/06/05.js
@@ -0,0 +1,12 @@
+describe('05 defaultPokemon', () => {
+
+  it('doesn\'t exist', () => {
+    expect(defaultPokemon).to.be.defined;
+  });
+
+  it('should be a list of three pokemon', () => {
+    expect(defaultPokemon).to.have.length(3);
+    expect(defaultPokemon[0].name).to.be('Luvdisc')
+  });
+
+});
diff --git a/tutorial/06/06.js b/tutorial/06/06.js
@@ -0,0 +1,7 @@
+describe('06 stores initial state', () => {
+
+  it('should be declared', () => {
+    expect(store.getState()).to.be.defined;
+  });
+
+});
diff --git a/tutorial/06/07.js b/tutorial/06/07.js
@@ -0,0 +1,7 @@
+describe('06 "pokemon" reducer', () => {
+
+  it('should have a default state of "defaultPokemon"', () => {
+    expect(pokemon(null, { type: 'ANY' })).to.have.length(3);
+  });
+
+});
diff --git a/tutorial/06/08.js b/tutorial/06/08.js
@@ -0,0 +1,13 @@
+describe('07 "pokemon" reducer', () => {
+
+  it('should no longer call "state"', () => {
+    const regex = /state/;
+    const string = pokemon.toString();
+    expect(string).not.to.match(regex);
+  });
+
+  it('should return the correct state', () => {
+    expect(pokemon(null, { type: 'VOTE_UP', payload: { id: 2} })[1].votes).be(1);
+  });
+
+});
diff --git a/tutorial/06/index.md b/tutorial/06/index.md
@@ -1,17 +1,31 @@
 ## Combine Reducers
-Using thunks for async actions.
+Create modular, composable reducers.
+
+
 
 + import `combineReducers` from redux
 @test('06/01')
+@hint('Try this: `import { combineReducers } from 'redux';`')
 
-+ set reducers using combineReducers, pass it into store
++ create a new `const reducers` and set it to "reducer". Pass "reducers" into your store for now, instead of "reducer". We'll use combineReducers shortly, but let's not break the app yet.
 @test('06/02')
 
-+ create a "defaultPokemon" state
++ We're going to create more than one reducer. They can't all be called "reducer", so rename your reducer "pokemon".
 @test('06/03')
 
-+ pass the default state into the pokemon reducer
++  combineReducers(), and pass in your reducer ({ pokemon })
 @test('06/04')
 
-+ set the initial state to an empty object
++ create a "defaultPokemon" state
 @test('06/05')
+
++ set the initial state of the store to an empty object
+@test('06/06')
+
++ pass the default state into the pokemon reducer
+@test('06/07')
+
++ We no longer pass the entire "state" inside of our reducers, only the slice of our state the reducer needs to know. Rename all references to "state" inside of your "pokemon" reducer to what it really is now: "pokemon".
+@test('06/08')
+
+@onPageComplete('The state remains the same as before, but now ')
diff --git a/tutorial/tutorial.md b/tutorial/tutorial.md
@@ -2,12 +2,12 @@
 
 A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.
 
-@import('01')
-@import('02')
-@import('03')
-@import('04')
-@import('05')
-<!-- @import('06') -->
+<!-- @import('01') -->
+<!-- @import('02') -->
+<!-- @import('03') -->
+<!-- @import('04') -->
+<!-- @import('05') -->
+@import('06')
 <!-- @import('07') -->
 <!-- @import('08') -->
 <!-- @import('09') -->
