update tutorial, update step 6

Author: ShMcK

coderoad.json

@@ -259,6 +259,7 @@
             "05/03"
           ],
           "hints": [
+            "Try this: `case VOTE_UP: const pokemon = state.pokemon.map(...)`",
             "return `Object.assign({}, state, { pokemon: nextPokemon });`"
           ]
         }
@@ -270,7 +271,7 @@
       "description": "Create modular, composable reducers with `combineReducers`.\n\nExplanation here.",
       "tasks": [
         {
-          "description": "create a new `const reducers` and set it equal 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.",
+          "description": "create a new `const reducers` and set it equal to \"reducer\". Pass \"reducers\" into your store for now, instead of \"reducer\". If this seems convoluted it is because we're trying not to break the app.",
           "tests": [
             "06/01"
           ],
@@ -283,7 +284,7 @@
           ]
         },
         {
-          "description": "We're going to create more than one reducer. They can't all be called \"reducer\", so rename your original reducer \"pokemon\". Make sure to set reducers equal to the new name as well.",
+          "description": "We're going to create more than one reducer. They can't all be called \"reducer\", so rename your original reducer \"pokemon\". Make sure to set `reducers` equal to the new name as well.",
           "tests": [
             "06/02"
           ],
@@ -295,48 +296,61 @@
           ]
         },
         {
-          "description": "import `combineReducers` from redux",
+          "description": "When we use `combineReducers` we will be able to define the initial state inside of each reducer. To keep things working, we'll have to do this step by step. Copy the \"pokemon\" key from `initialState` and give it its own variable called \"defaultPokemon\". It should be an array with three pokemon.",
           "tests": [
             "06/03"
           ],
           "hints": [
-            "Try this: `import { combineReducers } from 'redux';`"
+            "Like this: `const defaultPokemon = [{ ... }, { ... }, { ... }]`"
           ]
         },
         {
-          "description": "combineReducers(), and pass in your reducer ({ pokemon })",
+          "description": "Set your pokemon reducer first param, state, to equal \"pokemon\", and give it a default value of `defaultPokemon` using ES6 default params.",
           "tests": [
             "06/04"
           ],
           "hints": [
-            "Try this: `const reducers = combineReducers({pokemon});`"
+            "Default params work like this: `fn(param1 = defaultParam, param2)`",
+            "Like this: `const pokemon = (pokemon = defaultPokemon, action) => {`"
           ]
         },
         {
-          "description": "We're going to shake things up now to make our reducers more composable. Set the initial state inside of your `createStore` to simply be an empty object (`{}`)",
+          "description": "Fix references to \"state\" inside your reducer to match the passed in value \"pokemon\"",
           "tests": [
             "06/05"
+          ],
+          "hints": [
+            "Change three references to \"pokemon\" in your pokemon reducer",
+            "First: 'const pokemon = (pokemon = defaultPokemon, action) => {`",
+            "Second: `const nextPokemon = pokemon.map(...)`",
+            "Third: `default: return pokemon;`"
           ]
         },
         {
-          "description": "Thanks to `combineReducers` we can now define the initial state inside of each reducer. Get rid of \"initialState\", but keep the \"pokemon\" key and call it \"defaultPokemon\". It should be an array with three pokemon. Finally, pass the `defaultPokemon` as the default state in the pokemon reducer. You can use ES6 default params.",
+          "description": "Our initial state is now handled by `defaultPokemon`. Set the initial state inside of your `createStore` to simply be an empty object (`{}`).",
           "tests": [
             "06/06"
           ],
           "hints": [
-            "Like this: `const defaultPokemon = [{ id: 1, name: 'Luvdisc', ...`",
-            "Default params work like this: `fn(param1 = defaultParam, param2)`",
-            "Like this: `const pokemon = (state = defaultPokemon, action) => {`"
+            "Try this: `const store = createStore(reducers, {});`"
           ]
         },
         {
-          "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\".",
+          "description": "import `combineReducers` from redux",
           "tests": [
             "06/07"
           ],
           "hints": [
-            "Change three references to \"pokemon\" in your pokemon reducer",
-            "Third: `default: return pokemon;`"
+            "Try this: `import { combineReducers } from 'redux';`"
+          ]
+        },
+        {
+          "description": "`reducers` should now call `combineReducers` instead and call `pokemon`. `combineReducers` takes an object with keys of each reducer.",
+          "tests": [
+            "06/08"
+          ],
+          "hints": [
+            "Try this: `const reducers = combineReducers({pokemon});`"
           ]
         }
       ],

tutorial/05/index.md

@@ -29,6 +29,7 @@ const nextPokemon = state.pokemon.map(p => {
 
 + 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`
 @test('05/03')
+@hint('Try this: `case VOTE_UP: const pokemon = state.pokemon.map(...)`')
 @hint('return `Object.assign({}, state, { pokemon: nextPokemon });`')
 
 @onPageComplete('Now that you have an idea of how reducers work. Next we can look at how to create multiple, modular reducers.')

tutorial/06/03.js

@@ -1,9 +1,19 @@
-describe('03 combineReducers', () => {
+describe('03 defaultPokemon', () => {
 
-  const combineReducers = indexJs.__get__('combineReducers');
+  it('doesn\'t exist', () => {
+    expect(defaultPokemon).to.not.be.undefined;
+  });
+
+  it('should be a list of three pokemon', () => {
+    expect(defaultPokemon).to.have.length(3);
+  });
 
-  it('should be loaded', () => {
-    expect(combineReducers).to.not.be.undefined;
+  it('should have the full pokemon data from before', () => {
+    expect(defaultPokemon[0].name).to.equal('Luvdisc');
   });
 
+  // it('should be the default param for state in the pokemon reducer', () => {
+  //   expect(pokemon(undefined, { type: 'ANY' })).to.deep.equal(defaultPokemon);
+  // });
+
 });

tutorial/06/04.js

@@ -1,17 +1,7 @@
-describe('04 reducers', () => {
+describe('04 pokemon reducer first param "state"', () => {
 
-  it('should call "combineReducers"', () => {
-    // combineReducers calls a function "combination"
-    const regex = /function combination/;
-    const string = reducers.toString();
-    expect(string).to.match(regex);
-  });
-
-  it('should call "combineReducers" with { pokemon }', () => {
-    // combineReducers creates a new state with key values
-    // matching the passed in reducers
-    const keys = Object.keys(store.getState());
-    expect(keys.includes('pokemon')).to.be.true;
+  it('should have a default value of `defaultPokemon`', () => {
+    
   });
 
 });

tutorial/06/05.js

@@ -1,11 +1,16 @@
-describe('05 stores initial state', () => {
+describe('05 "pokemon" reducer', () => {
 
-  it('should be declared', () => {
-    // the state will become greater after we declare our pokemon,
-    // but for now let's make sure the state is just an empty object
-    if (process.env.TASK_POSITION === '4') {
-      expect(store.getState()).to.deep.equal({});
-    }
+  it('should reference "pokemon", not "state"', () => {
+    const regex = /state/;
+    const string = pokemon.toString();
+    expect(string).to.not.match(regex);
+  });
+
+  it('should still work on VOTE_UP', () => {
+    const first = defaultPokemon[0];
+    const target = first.votes + 1;
+    const next = pokemon(undefined, { type: 'VOTE_UP', payload: { id: first.id } });
+    expect(next[0].votes).to.equal(target);
   });
 
 });

tutorial/06/06.js

@@ -1,19 +1,11 @@
-describe('06 defaultPokemon', () => {
-
-  it('doesn\'t exist', () => {
-    expect(defaultPokemon).to.not.be.undefined;
-  });
-
-  it('should be a list of three pokemon', () => {
-    expect(defaultPokemon).to.have.length(3);
-  });
-
-  it('should have the full pokemon data from before', () => {
-    expect(defaultPokemon[0].name).to.equal('Luvdisc');
-  });
-
-  it('should be the default param for state in the pokemon reducer', () => {
-    expect(pokemon(undefined, { type: 'ANY' })).to.deep.equal(defaultPokemon);
+describe('06 stores initial state', () => {
+
+  it('should be declared', () => {
+    // the state will become greater after we declare our pokemon,
+    // but for now let's make sure the state is just an empty object
+    if (process.env.TASK_POSITION === '4') {
+      expect(store.getState()).to.deep.equal({});
+    }
   });
 
 });

tutorial/06/07.js

@@ -1,16 +1,9 @@
-describe('07 "pokemon" reducer', () => {
+describe('07 combineReducers', () => {
 
-  it('should reference "pokemon", not "state"', () => {
-    const regex = /state/;
-    const string = pokemon.toString();
-    expect(string).to.not.match(regex);
-  });
+  const combineReducers = indexJs.__get__('combineReducers');
 
-  it('voteUp should still work', () => {
-    const first = defaultPokemon[0];
-    const target = first.votes + 1
-    const next = pokemon(undefined, { type: 'VOTE_UP', payload: { id: first.id } });
-    expect(next.pokemon[0].votes).to.equal(target);
+  it('should be loaded', () => {
+    expect(combineReducers).to.not.be.undefined;
   });
 
 });

tutorial/06/08.js

@@ -0,0 +1,17 @@
+describe('08 reducers', () => {
+
+  it('should call "combineReducers"', () => {
+    // combineReducers calls a function "combination"
+    const regex = /function combination/;
+    const string = reducers.toString();
+    expect(string).to.match(regex);
+  });
+
+  it('should call "combineReducers" with { pokemon }', () => {
+    // combineReducers creates a new state with key values
+    // matching the passed in reducers
+    const keys = Object.keys(store.getState());
+    expect(keys.includes('pokemon')).to.be.true;
+  });
+
+});

tutorial/06/index.md

@@ -3,40 +3,46 @@ Create modular, composable reducers with `combineReducers`.
 
 Explanation here.
 
-+ create a new `const reducers` and set it equal 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.
++ create a new `const reducers` and set it equal to "reducer". Pass "reducers" into your store for now, instead of "reducer". If this seems convoluted it is because we're trying not to break the app.
 @test('06/01')
 @action(open('src/index.js'))
 @hint('First, try this: `const reducers = reducer;`')
 @hint('Second, try this: `const store = createStore(reducers, initialState);`')
 
-+ We're going to create more than one reducer. They can't all be called "reducer", so rename your original reducer "pokemon". Make sure to set reducers equal to the new name as well.
++ We're going to create more than one reducer. They can't all be called "reducer", so rename your original reducer "pokemon". Make sure to set `reducers` equal to the new name as well.
 @test('06/02')
 @hint('First, rename "pokemon" to "reducer"')
 @hint('Like this: `const pokemon = (state, action) => {...}`')
 @hint('Second, change your "reducers" to equal "pokemon"')
 @hint('Like this: `const reducers = pokemon;`')
 
-+ import `combineReducers` from redux
++ When we use `combineReducers` we will be able to define the initial state inside of each reducer. To keep things working, we'll have to do this step by step. Copy the "pokemon" key from `initialState` and give it its own variable called "defaultPokemon". It should be an array with three pokemon.
 @test('06/03')
-@hint('Try this: `import { combineReducers } from 'redux';`')
+@hint('Like this: `const defaultPokemon = [{ ... }, { ... }, { ... }]`')
 
-+ combineReducers(), and pass in your reducer ({ pokemon })
++ Set your pokemon reducer first param, state, to equal "pokemon", and give it a default value of `defaultPokemon` using ES6 default params.
 @test('06/04')
-@hint('Try this: `const reducers = combineReducers({pokemon});`')
+@hint('Default params work like this: `fn(param1 = defaultParam, param2)`')
+@hint('Like this: `const pokemon = (pokemon = defaultPokemon, action) => {`')
 
-+ We're going to shake things up now to make our reducers more composable. Set the initial state inside of your `createStore` to simply be an empty object (`{}`)
++ Fix references to "state" inside your reducer to match the passed in value "pokemon"
 @test('06/05')
+@hint('Change three references to "pokemon" in your pokemon reducer')
+@hint('First: 'const pokemon = (pokemon = defaultPokemon, action) => {`')
+@hint('Second: `const nextPokemon = pokemon.map(...)`')
+@hint('Third: `default: return pokemon;`')
 
-+ Thanks to `combineReducers` we can now define the initial state inside of each reducer. Get rid of "initialState", but keep the "pokemon" key and call it "defaultPokemon". It should be an array with three pokemon. Finally, pass the `defaultPokemon` as the default state in the pokemon reducer. You can use ES6 default params.
++ Our initial state is now handled by `defaultPokemon`. Set the initial state inside of your `createStore` to simply be an empty object (`{}`).
 @test('06/06')
-@hint('Like this: `const defaultPokemon = [{ id: 1, name: 'Luvdisc', ...`')
-@hint('Default params work like this: `fn(param1 = defaultParam, param2)`')
-@hint('Like this: `const pokemon = (state = defaultPokemon, action) => {`')
-
+@hint('Try this: `const store = createStore(reducers, {});`')
 
-+ 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".
++ import `combineReducers` from redux
 @test('06/07')
-@hint('Change three references to "pokemon" in your pokemon reducer')
-@hint('Third: `default: return pokemon;`')
+@hint('Try this: `import { combineReducers } from 'redux';`')
+
++ `reducers` should now call `combineReducers` instead and call `pokemon`. `combineReducers` takes an object with keys of each reducer.
+@test('06/08')
+@hint('Try this: `const reducers = combineReducers({pokemon});`')
+
 
 @onPageComplete('The state remains the same, but now our reducers are much more modular. In the next step, we will separate our code into it's own file')