Skip to content

Commit 5474a52

Browse files
ShMcKShMcK
committed
step 6 tasks and tests complete
1 parent 497ced9 commit 5474a52

File tree

9 files changed

+91
-45
lines changed

9 files changed

+91
-45
lines changed

‎coderoad.json

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,22 @@
1212
"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.",
1313
"tests": [
1414
"06/01"
15+
],
16+
"hints": [
17+
"First, try this: `const reducers = reducer;`",
18+
"Second, try this: `const store = createStore(reducers, initialState);`"
1519
]
1620
},
1721
{
1822
"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.",
1923
"tests": [
2024
"06/02"
25+
],
26+
"hints": [
27+
"First, rename \"pokemon\" to \"reducer\"",
28+
"Like this: `const pokemon = (state, action) => {...}`",
29+
"Second, change your \"reducers\" to equal \"pokemon\"",
30+
"Like this: `const reducers = pokemon;`"
2131
]
2232
},
2333
{
@@ -33,30 +43,32 @@
3343
"description": "combineReducers(), and pass in your reducer ({ pokemon })",
3444
"tests": [
3545
"06/04"
46+
],
47+
"hints": [
48+
"Try this: ```const reducers = combineReducers({\n pokemon\n});\n```"
3649
]
3750
},
3851
{
39-
"description": "create a \"defaultPokemon\" state",
52+
"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 (`{}`)",
4053
"tests": [
4154
"06/05"
4255
]
4356
},
4457
{
45-
"description": "set the initial state of the store to an empty object",
58+
"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.",
4659
"tests": [
4760
"06/06"
48-
]
49-
},
50-
{
51-
"description": "pass the default state into the pokemon reducer",
52-
"tests": [
53-
"06/07"
61+
],
62+
"hints": [
63+
"Like this:`const defaultPokemon = [{\n id: 1,\n name: 'Luvdisc',\n ...\n`",
64+
"Default params work like this: `fn(param1 = defaultParam, param2)`",
65+
"Like this: `const pokemon = (state = defaultPokemon, action) => {`"
5466
]
5567
},
5668
{
5769
"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\".",
5870
"tests": [
59-
"06/08"
71+
"06/07"
6072
]
6173
}
6274
],

‎tutorial/06/01.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('01 reducers', () => {
1212
// test must be support future state of reducers
1313
// reducer will be renamed "pokemon", and then
1414
// use combineReducers, which will be hard to track
15-
if (reducers.toString().match(/=\s?reducer/)) {
15+
if (reducers.toString().match(/= reducer;?$/m)) {
1616
expect(reducers).to.equal(reducer);
1717
}
1818
});

‎tutorial/06/02.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
describe('02 "pokemon"', () => {
22

3+
34
it('should be the reducer new name', () => {
45
expect(pokemon).to.be.defined;
6+
});
7+
8+
it('should be the reducer function', () => {
59
expect(typeof pokemon).to.equal('function');
610
});
711

812
it('should replace the value of "reducers"', () => {
9-
if (reducers.toString().match(/=\s?reducer/)) {
13+
// if reducers = reducer, it should fail
14+
if (reducers.toString().match(/= reducer;?$/m)) {
1015
expect(true).to.be.false;
1116
}
12-
})
17+
});
1318

1419
});

‎tutorial/06/05.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
describe('05 defaultPokemon', () => {
1+
describe('05 stores initial state', () => {
22

3-
it('doesn\'t exist', () => {
4-
expect(defaultPokemon).to.be.defined;
5-
});
6-
7-
it('should be a list of three pokemon', () => {
8-
expect(defaultPokemon).to.have.length(3);
9-
expect(defaultPokemon[0].name).to.be('Luvdisc')
3+
it('should be declared', () => {
4+
// the state will become greater after we declare our pokemon,
5+
// but for now let's make sure the state is just an empty object
6+
if (process.env.TASK_POSITION === '4') {
7+
expect(store.getState()).to.deep.equal({});
8+
}
109
});
1110

1211
});

‎tutorial/06/06.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1-
describe('06 stores initial state', () => {
1+
describe('06 defaultPokemon', () => {
22

3-
it('should be declared', () => {
4-
expect(store.getState()).to.be.defined;
3+
it('doesn\'t exist', () => {
4+
expect(defaultPokemon).to.be.defined;
5+
});
6+
7+
it('should be a list of three pokemon', () => {
8+
expect(defaultPokemon).to.have.length(3);
9+
});
10+
11+
it('should have the full pokemon data from before', () => {
12+
expect(defaultPokemon[0].name).to.equal('Luvdisc');
13+
});
14+
15+
it('should be the default param for state in the pokemon reducer', () => {
16+
expect(pokemon(undefined, { type: 'ANY' })).to.deep.equal(defaultPokemon);
517
});
618

719
});

‎tutorial/06/07.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
describe('07 "pokemon" reducer', () => {
22

3-
it('should have a default state of "defaultPokemon"', () => {
4-
expect(pokemon(null, { type: 'ANY' })).to.have.length(3);
3+
it('should reference "pokemon", not "state"', () => {
4+
const regex = /state/;
5+
const string = pokemon.toString();
6+
expect(string).to.not.match(regex);
7+
});
8+
9+
it('voteUp should still work', () => {
10+
const first = defaultPokemon[0];
11+
const target = first.votes + 1
12+
const next = pokemon(undefined, { type: 'VOTE_UP', payload: { id: first.id } });
13+
expect(next.pokemon[0].votes).to.equal(target);
514
});
615

716
});

‎tutorial/06/08.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎tutorial/06/index.md

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,45 @@ Create modular, composable reducers with `combineReducers`.
55

66
+ 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.
77
@test('06/01')
8+
@hint('First, try this: `const reducers = reducer;`')
9+
@hint('Second, try this: `const store = createStore(reducers, initialState);`')
810

911
+ 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.
1012
@test('06/02')
13+
@hint('First, rename "pokemon" to "reducer"')
14+
@hint('Like this: `const pokemon = (state, action) => {...}`')
15+
@hint('Second, change your "reducers" to equal "pokemon"')
16+
@hint('Like this: `const reducers = pokemon;`')
1117

1218
+ import `combineReducers` from redux
1319
@test('06/03')
1420
@hint('Try this: `import { combineReducers } from 'redux';`')
1521

1622
+ combineReducers(), and pass in your reducer ({ pokemon })
1723
@test('06/04')
18-
19-
+ create a "defaultPokemon" state
24+
@hint('Try this: ```
25+
const reducers = combineReducers({
26+
pokemon
27+
});
28+
```
29+
')
30+
31+
+ 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 (`{}`)
2032
@test('06/05')
2133
22-
+ set the initial state of the store to an empty object
34+
+ 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.
2335
@test('06/06')
36+
@hint('Like this:
37+
`const defaultPokemon = [{
38+
id: 1,
39+
name: 'Luvdisc',
40+
...
41+
`')
42+
@hint('Default params work like this: `fn(param1 = defaultParam, param2)`')
43+
@hint('Like this: `const pokemon = (state = defaultPokemon, action) => {`')
2444
25-
+ pass the default state into the pokemon reducer
26-
@test('06/07')
2745
2846
+ 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".
29-
@test('06/08')
47+
@test('06/07')
3048
3149
@onPageComplete('The state remains the same as before, but now ')

‎tutorial/tutorial.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.
44

5-
@import('01')
6-
@import('02')
7-
@import('03')
8-
@import('04')
9-
@import('05')
5+
<!-- @import('01') -->
6+
<!-- @import('02') -->
7+
<!-- @import('03') -->
8+
<!-- @import('04') -->
9+
<!-- @import('05') -->
1010
@import('06')
1111
<!-- @import('07') -->
1212
<!-- @import('08') -->

0 commit comments

Comments
 (0)