Skip to content

Commit 41a3cd3

Browse files
ShMcKShMcK
committed
update steps 1-4
1 parent 7c78533 commit 41a3cd3

File tree

6 files changed

+41
-15
lines changed

6 files changed

+41
-15
lines changed

‎coderoad.json

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
],
2121
"actions": [
2222
"open('package.json')",
23-
"set('{\n \"name\": \"coderoad-redux-js-demo\",\n \"version\": \"0.1.0\",\n \"description\": \"Coderoad tutorial for using redux with raw javascript\",\n \"bugs\": {\n \"url\": \"https://github.com/shmck/coderoad-redux-js\"\n },\n \"license\": \"ISC\",\n \"author\": \"Shawn McKay <shawn.j.mckay@gmail.com>\",\n \"main\": \"index.js\",\n \"repository\": \"https://github.com/shmck/coderoad-redux-js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"mocha-coderoad\": \"0.9.3\",\n \"coderoad-redux-js\": \"0.1.0\"\n },\n \"devDependencies\": {\n \"babel-preset-es2015\": \"^6.9.0\",\n \"babel-preset-react\": \"^6.11.1\",\n \"babelify\": \"^7.3.0\",\n \"browser-sync\": \"^2.13.0\",\n \"concurrently\": \"^2.2.0\",\n \"npm-watch\": \"^0.1.5\",\n \"coderoad-redux-js\": \"^0.1.0\"\n },\n \"watch\": {\n \"reload\": {\n \"patterns\": [\n \"src\"\n ],\n \"extensions\": \"js,jsx,css,html,scss\",\n \"ignore\": \"node_modules\",\n \"quiet\": false\n }\n },\n \"scripts\": {\n \"browserify\": \"browserify src/index.js --extension=.jsx -o dist/bundle.js -t [ babelify --presets [ es2015 react ] ]\",\n \"browsersync:reload\": \"browser-sync reload\",\n \"browsersync:start\": \"browser-sync start --server --files 'index.html dist/bundle.js'\",\n \"build\": \"npm run browserify\",\n \"reload\": \"npm run browserify && npm run browsersync:reload\",\n \"start\": \"concurrently --kill-others 'npm run build' 'npm run browsersync:start' 'npm run watch'\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"watch\": \"npm-watch\",\n \"setup\": \"npm i && mkdir -p dist && mkdir -p src && touch src/index.js && npm i -g concurrently browser-sync \"\n }\n}\n')"
23+
"set('{\n \"name\": \"coderoad-redux-js-demo\",\n \"version\": \"0.1.0\",\n \"description\": \"Coderoad tutorial for using redux with raw javascript\",\n \"bugs\": {\n \"url\": \"https://github.com/shmck/coderoad-redux-js\"\n },\n \"license\": \"ISC\",\n \"author\": \"Shawn McKay <shawn.j.mckay@gmail.com>\",\n \"main\": \"index.js\",\n \"repository\": \"https://github.com/shmck/coderoad-redux-js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"dependencies\": {\n \"mocha-coderoad\": \"0.9.3\"\n },\n \"devDependencies\": {\n \"babel-preset-es2015\": \"^6.9.0\",\n \"babel-preset-react\": \"^6.11.1\",\n \"babelify\": \"^7.3.0\",\n \"browser-sync\": \"^2.13.0\",\n \"concurrently\": \"^2.2.0\",\n \"npm-watch\": \"^0.1.5\",\n \"coderoad-redux-js\": \"^0.1.0\"\n },\n \"watch\": {\n \"reload\": {\n \"patterns\": [\n \"src\"\n ],\n \"extensions\": \"js,jsx,css,html,scss\",\n \"ignore\": \"node_modules\",\n \"quiet\": false\n }\n },\n \"scripts\": {\n \"browserify\": \"browserify src/index.js --extension=.jsx -o dist/bundle.js -t [ babelify --presets [ es2015 react ] ]\",\n \"browsersync:reload\": \"browser-sync reload\",\n \"browsersync:start\": \"browser-sync start --server --files 'index.html dist/bundle.js'\",\n \"build\": \"npm run browserify\",\n \"reload\": \"npm run browserify && npm run browsersync:reload\",\n \"start\": \"concurrently --kill-others 'npm run build' 'npm run browsersync:start' 'npm run watch'\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n \"watch\": \"npm-watch\",\n \"setup\": \"npm i && mkdir -p dist && mkdir -p src && touch src/index.js && npm i -g concurrently browser-sync \"\n }\n}\n')"
2424
]
2525
},
2626
{
@@ -30,7 +30,7 @@
3030
],
3131
"actions": [
3232
"open('index.html')",
33-
"set('<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Worst Pokemon</title>\n <link\n rel=\"stylesheet\"\n href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\"\n crossorigin=\"anonymous\"\n />\n</head>\n<body>\n <div id=\"app\">\n <p>Check the console...</p>\n </div>\n\n <script src=\"dist/bundle.js\"></script>\n</body>\n</html>\n\n')"
33+
"set('<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>Worst Pokemon</title>\n <link\n rel=\"stylesheet\"\n href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\"\n crossorigin=\"anonymous\"\n />\n</head>\n<body>\n <div id=\"app\">\n <h1>Welcome!</h1>\n <p>Check the console...</p>\n </div>\n\n <script src=\"dist/bundle.js\"></script>\n</body>\n</html>\n\n')"
3434
]
3535
}
3636
],
@@ -110,7 +110,7 @@
110110
"description": "Events that change the data.\n\n##### 1. Actions\n```js\nconst action = { type: 'ACTION_NAME' };\n```\n\n##### 2. Action Creators\n\n```js\nconst actionName = () => ({ type: 'ACTION_NAME' });\n```\n\n##### 3. Action Types\n\n```js\nconst ACTION_NAME = 'ACTION_NAME'\n```",
111111
"tasks": [
112112
{
113-
"description": "create an action called `voteUp`",
113+
"description": "create an action called `voteUp` and a type of 'VOTE_UP'",
114114
"tests": [
115115
"03/01"
116116
],
@@ -129,7 +129,7 @@
129129
]
130130
},
131131
{
132-
"description": "add a param of `id` to your action creator",
132+
"description": "add a param of `id` to your action creator, and a payload of \"id\"",
133133
"tests": [
134134
"03/03"
135135
]
@@ -161,12 +161,16 @@
161161
"description": "The data transformation\n\n```js\nconst reducer = (state) => {\n console.log(state);\n return state;\n};\n```",
162162
"tasks": [
163163
{
164-
"description": "Extract the `state => state` function in create store, and call in a new function called \"reducer\".",
164+
"description": "Extract the `state => state` function called by `createStore`, and declare it with a variable called \"reducer\".",
165165
"tests": [
166166
"04/01"
167167
],
168168
"actions": [
169169
"open('src/index.js')"
170+
],
171+
"hints": [
172+
"Try this: `const reducer = state => state;`",
173+
"Rename this: `const store = createStore(reducer, initialState)`"
170174
]
171175
},
172176
{
@@ -180,9 +184,12 @@
180184
]
181185
},
182186
{
183-
"description": "Pass an action as a second param to the reducer",
187+
"description": "The reducer takes two params. The first is \"state\", call the second one \"action\"",
184188
"tests": [
185189
"04/03"
190+
],
191+
"hints": [
192+
"Try this: `const reducer = (state, action) => ...`"
186193
]
187194
},
188195
{
@@ -192,9 +199,13 @@
192199
]
193200
},
194201
{
195-
"description": "Create a `switch` statement and pass in `action.type`, the default return should return `state`",
202+
"description": "Create a `switch` statement in your `reducer` and pass in `action.type`, the default return should return `state`",
196203
"tests": [
197204
"04/05"
205+
],
206+
"hints": [
207+
"In your reducer, try this: `switch(action.type) {}`",
208+
"Your switch statement should have a `default: return state`"
198209
]
199210
},
200211
{
@@ -207,6 +218,9 @@
207218
"description": "add a switch case for `VOTE_UP`. For now, just console.log the `id` of the action passed in and return the default state again. Tip: destructuring: `const { id } = action.payload;`",
208219
"tests": [
209220
"04/07"
221+
],
222+
"hints": [
223+
"Try this: `case VOTE_UP: console.log(action.payload.id);`"
210224
]
211225
}
212226
],

‎tutorial/02/02.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ describe('02 createStore', () => {
33
const createStore = indexJs.__get__('createStore');
44

55
it('isn\'t imported. `import { createStore } from "redux";`', () => {
6-
console.log(createStore);
76
expect(createStore).to.not.be.undefined;
87
});
98

‎tutorial/02/03.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
describe('03 store', () => {
1+
const store = indexJs.__get__('store');
22

3-
const store = indexJs.__get__('store');
3+
describe('03 store', () => {
44

55
it('isn\'t defined. `const store`', () => {
66
expect(store).to.not.be.undefined;
77
expect(store).to.not.equal({});
88
});
99

10+
it('should use `createStore`', () => {
11+
expect(store.hasOwnProperty('dispatch')).to.be.true;
12+
});
13+
1014
});

‎tutorial/03/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const actionName = () => ({ type: 'ACTION_NAME' });
1818
const ACTION_NAME = 'ACTION_NAME'
1919
```
2020

21-
+ create an action called `voteUp`
21+
+ create an action called `voteUp` and a type of 'VOTE_UP'
2222
@test('03/01')
2323
@action(open('src/index.js'))
2424

@@ -27,7 +27,7 @@ const ACTION_NAME = 'ACTION_NAME'
2727
@hint('wrap your output object in round brackets')
2828
@hint('Try this: `const voteUp = () => ({ type: "VOTE_UP" });`')
2929

30-
+ add a param of `id` to your action creator
30+
+ add a param of `id` to your action creator, and a payload of "id"
3131
@test('03/03')
3232

3333
+ create an action type for `voteUp`

‎tutorial/04/04.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
describe('04 console.log', () => {
22

3+
const initialState = indexJs.__get__('initialState');
4+
const voteUp = indexJs.__get__('voteUp');
5+
36
it('should be called with state and action as in the example', () => {
47
const regex = / console.log\(\s?[\'\"]state:\s?[\'\"],\s?state,\s?[\'\"]action:\s?[\'\"],\s?action\s?\)/;
58
const string = reducer.toString();

‎tutorial/04/index.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@ const reducer = (state) => {
88
};
99
```
1010

11-
+ Extract the `state => state` function in create store, and call in a new function called "reducer".
11+
+ Extract the `state => state` function called by `createStore`, and declare it with a variable called "reducer".
1212
@test('04/01')
1313
@action(open('src/index.js'))
14+
@hint('Try this: `const reducer = state => state;`')
15+
@hint('Rename this: `const store = createStore(reducer, initialState)`')
1416

1517
+ Log the state inside of your reducer. What does it look like?
1618
@test('04/02')
@@ -24,19 +26,23 @@ const reducer = (state) => {
2426
```
2527
')
2628

27-
+ Pass an action as a second param to the reducer
29+
+ The reducer takes two params. The first is "state", call the second one "action"
2830
@test('04/03')
31+
@hint('Try this: `const reducer = (state, action) => ...`')
2932

3033
+ Dispatch two voteUp actions through the reducer: `store.dispatch(voteUp(2))`. Change your log statement inside of your reducer to look like this: `console.log('state: ', state, 'action: ', action)`
3134
@test('04/04')
3235

33-
+ Create a `switch` statement and pass in `action.type`, the default return should return `state`
36+
+ Create a `switch` statement in your `reducer` and pass in `action.type`, the default return should return `state`
3437
@test('04/05')
38+
@hint('In your reducer, try this: `switch(action.type) {}`')
39+
@hint('Your switch statement should have a `default: return state`')
3540

3641
+ The `switch` statement should have a `default` case that returns the state
3742
@test('04/06')
3843

3944
+ add a switch case for `VOTE_UP`. For now, just console.log the `id` of the action passed in and return the default state again. Tip: destructuring: `const { id } = action.payload;`
4045
@test('04/07')
46+
@hint('Try this: `case VOTE_UP: console.log(action.payload.id);`')
4147

4248
@onPageComplete('There are a few "gotchas" that come up with reducers. Reducers must be "pure" functions, let's find out how to accomplish this in the next step')

0 commit comments

Comments
 (0)