],

"actions": [

"open('package.json')",

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

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

]

},

{

],

"actions": [

"open('index.html')",

]

}

],

"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```",

"tasks": [

{

"description":"create an action called `voteUp`",

"description":"create an action called `voteUp` and a type of 'VOTE_UP'",

"tests": [

],

]

},

{

"description":"add a param of `id` to your action creator",

"description":"add a param of `id` to your action creator, and a payload of\"id\"",

"tests": [

]

"description":"The data transformation\n\n```js\nconst reducer = (state) => {\n console.log(state);\n return state;\n};\n```",

"tasks": [

{

"description":"Extract the `state => state` functionin create store, andcall in a new function called\"reducer\".",

"description":"Extract the `state => state` functioncalled by `createStore`, anddeclare it with a variable called\"reducer\".",

"tests": [

],

"actions": [

],

"hints": [

"Try this: `const reducer = state => state;`",

]

},

{

]

},

{

"description":"Pass an action as a second param tothereducer",

"description":"The reducer takes two params. The first is\"state\", callthesecond one\"action\"",

"tests": [

],

"hints": [

]

},

{

]

},

{

"description":"Create a `switch` statement and pass in `action.type`, the default return should return `state`",

"description":"Create a `switch` statementin your `reducer`and pass in `action.type`, the default return should return `state`",

"tests": [

],

"hints": [

"In your reducer, try this: `switch(action.type) {}`",

]

},

{

"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;`",

"tests": [

],

"hints": [

]

}

],

+ create an action called`voteUp`

+ create an action called`voteUp` and a type of 'VOTE_UP'

@test('03/01')

@action(open('src/index.js'))

@hint('wrap your output object in round brackets')

@hint('Try this:`const voteUp = () => ({ type: "VOTE_UP" });`')

+ add a param of`id` to your action creator

+ add a param of`id` to your action creator, and a payload of "id"

@test('03/03')

+ create an action type for`voteUp`

};

+ Extract the`state => state` functionin create store, andcall in a new function called "reducer".

+ Extract the`state => state` functioncalled by`createStore`, anddeclare it with a variable called "reducer".

@test('04/01')

@action(open('src/index.js'))

@hint('Try this:`const reducer = state => state;`')

@hint('Rename this:`const store = createStore(reducer, initialState)`')

+ Log the state inside of your reducer. What does it look like?

@test('04/02')

')

+Pass an action as a second param tothereducer

+The reducer takes two params. The first is "state", callthesecond one "action"

@test('04/03')

@hint('Try this:`const reducer = (state, action) => ...`')

+ 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)`

@test('04/04')

+ Create a`switch` statement and pass in`action.type`, the default return should return`state`

+ Create a`switch` statementin your`reducer`and pass in`action.type`, the default return should return`state`

@test('04/05')

@hint('In your reducer, try this:`switch(action.type) {}`')

@hint('Your switch statement should have a`default: return state`')

+ The`switch` statement should have a`default` case that returns the state

@test('04/06')

+ 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;`

@test('04/07')

@hint('Try this:`case VOTE_UP: console.log(action.payload.id);`')

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