],

"hints": [

"Try this: `case VOTE_UP: const pokemon = state.pokemon.map(...)`",

]

}

"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'snot 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 tryingnottobreak the app.",

"tests": [

],

]

},

{

"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": [

],

]

},

{

"description":"import`combineReducers` fromredux",

"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\" keyfrom`initialState` and give it its own variable called\"defaultPokemon\". It should be an array with three pokemon.",

"tests": [

],

"hints": [

]

},

{

"description":"combineReducers(),andpass in your reducer ({ pokemon })",

"description":"Set your pokemon reducer first param, state, to equal\"pokemon\",andgive it a default value of `defaultPokemon` using ES6 default params.",

"tests": [

],

"hints": [

"Default params work like this: `fn(param1 = defaultParam, param2)`",

]

},

{

"description":"We're going toshake things up now to make our reducers more composable. Set the initialstate insideofyour`createStore` tosimply be an empty object (`{}`)",

"description":"Fix references to\"state\" inside yourreducer tomatch the passed in value\"pokemon\"",

"tests": [

],

"hints": [

"Change three references to\"pokemon\" in your pokemon reducer",

"First: 'const pokemon = (pokemon = defaultPokemon, action) => {`",

"Second: `const nextPokemon = pokemon.map(...)`",

]

},

{

"description":"Thanks to `combineReducers` we cannowdefinethe initial state inside ofeach reducer. Get rid of\"initialState\", but keep the\"pokemon\" key and call it\"defaultPokemon\". It shouldbe anarray 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 isnowhandled by `defaultPokemon`. Setthe initial state inside ofyour `createStore` to simplybe anempty object (`{}`).",

"tests": [

],

"hints": [

"Like this: `const defaultPokemon = [{ id: 1, name: 'Luvdisc', ...`",

"Default params work like this: `fn(param1 = defaultParam, param2)`",

]

},

{

"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": [

],

"hints": [

"Change three references to\"pokemon\" in your pokemon reducer",

]

},

{

"description":"`reducers` should now call `combineReducers` instead and call `pokemon`. `combineReducers` takes an object with keys of each reducer.",

"tests": [

],

"hints": [

]

}

],

+ 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.')

constnext=pokemon(undefined,{type:'VOTE_UP',payload:{id:first.id}});

expect(pokemon(undefined,{type:'ANY'})).to.deep.equal(defaultPokemon);

constnext=pokemon(undefined,{type:'VOTE_UP',payload:{id:first.id}});

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'snot 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 tryingnottobreak 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` fromredux

+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" keyfrom`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(),andpass in your reducer ({ pokemon })

+Set your pokemon reducer first param, state, to equal "pokemon",andgive 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 toshake things up now to make our reducers more composable. Set the initialstate insideofyour`createStore` tosimply be an empty object (`{}`)

+Fix references to"state" inside yourreducer tomatch 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 cannowdefinethe initial state inside ofeach reducer. Get rid of "initialState", but keep the "pokemon" key and call it "defaultPokemon". It shouldbe anarray with three pokemon. Finally, pass the`defaultPokemon` as the default state in the pokemon reducer. You can use ES6 default params.

+Our initial state isnowhandled by`defaultPokemon`. Setthe initial state inside ofyour`createStore` to simplybe anempty 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, {});`')

@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')