Skip to content

Commit 36d97fc

Browse files
ShMcKShMcK
committed
step 3 & 4 progress
1 parent 1432209 commit 36d97fc

File tree

11 files changed

+231
-2
lines changed

11 files changed

+231
-2
lines changed

‎README.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,35 @@ The "single source of truth".
4545
```js
4646
const store = createStore(reducer, initialState);
4747
```
48+
49+
##### Actions
50+
51+
Events that change the data.
52+
53+
##### 1. Actions
54+
```js
55+
const action = { type: 'ACTION_NAME' };
56+
```
57+
58+
##### 2. Action Creators
59+
60+
```js
61+
const actionName = () => ({ type: 'ACTION_NAME' });
62+
```
63+
64+
##### 3. Action Types
65+
66+
```js
67+
const ACTION_NAME = 'ACTION_NAME'
68+
```
69+
70+
##### Reducer
71+
72+
The data transformation
73+
74+
```js
75+
const reducer = (state) => {
76+
console.log('state: ', state);
77+
return state;
78+
};
79+
```

‎coderoad.json

Lines changed: 88 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@
2929
"description": "The \"single source of truth\".\n\n```js\nconst store = createStore(reducer, initialState);\n```",
3030
"tasks": [
3131
{
32-
"description": "install Redux. Run `npm install --save redux`.",
32+
"description": "install Redux.",
33+
"hints": [
34+
"Run `npm install --save redux`."
35+
],
3336
"actions": [
3437
"open('index.js')"
3538
],
@@ -38,13 +41,20 @@
3841
]
3942
},
4043
{
41-
"description": "import createStore. `import { createStore } from 'redux';`",
44+
"description": "import `createStore` from the redux module.",
45+
"hints": [
46+
"Add `import { createStore } from 'redux';`"
47+
],
4248
"tests": [
4349
"02/02"
4450
]
4551
},
4652
{
4753
"description": "create your first store and call it `store`. Use a simple \"reducer\" function for now, let's say `state => state`.",
54+
"hints": [
55+
"declare your store, `const store`",
56+
"call store with a simple reducer, `const store = createStore(state => state)`"
57+
],
4858
"tests": [
4959
"02/03"
5060
]
@@ -53,10 +63,86 @@
5363
"description": "log your store to the console and have a look.",
5464
"tests": [
5565
"02/04"
66+
],
67+
"hints": [
68+
"console.log(store)"
69+
]
70+
},
71+
{
72+
"description": "log `store.getState()` to the console",
73+
"tests": [
74+
"02/05"
75+
],
76+
"hints": [
77+
"console.log(store.getState())"
78+
]
79+
},
80+
{
81+
"description": "move the initial state to the top of the file, and pass it in as a second param your `createStore`",
82+
"tests": [
83+
"02/06"
84+
],
85+
"hints": [
86+
"Move `initialState` above your `store`",
87+
"Pass in `initialState` as a second param to `createStore`"
88+
],
89+
"actions": [
90+
"insert('const initialState = {\n pokemon: [{\n id: 1,\n name: 'Luvdisc',\n description: 'This heart-shaped POKéMON earned its name by swimming after loving couples it spotted in the ocean’s waves.',\n votes: 3\n }, {\n id: 2,\n name: 'Trubbish',\n description: 'Wanting more garbage, they follow people who litter. They always belch poison gas.',\n votes: 2\n }, {\n id: 3,\n name: 'Stunfisk',\n description: 'Its skin is very hard, so it is unhurt even if stepped on by sumo wrestlers. It smiles when transmitting electricity.',\n votes: 0\n }]\n };\n')"
5691
]
5792
}
5893
],
5994
"onPageComplete": "As you can see, the store is just an object with various methods like \"dispatch\" and \"getState\". Let's see what these methods do in the next step."
95+
},
96+
{
97+
"title": "Actions",
98+
"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```",
99+
"tasks": [
100+
{
101+
"description": "create an action called `voteUp`",
102+
"tests": [
103+
"03/01"
104+
],
105+
"actions": [
106+
"open('index.js')"
107+
]
108+
},
109+
{
110+
"description": "change `voteUp` into an action creator.",
111+
"tests": [
112+
"03/02"
113+
]
114+
},
115+
{
116+
"description": "add a param of `id` to your action creator",
117+
"tests": [
118+
"03/03"
119+
]
120+
},
121+
{
122+
"description": "create an action type for `voteUp`",
123+
"hints": [
124+
"const VOTE_UP = 'VOTE_UP"
125+
],
126+
"tests": [
127+
"03/04"
128+
]
129+
}
130+
]
131+
},
132+
{
133+
"title": "Reducer",
134+
"description": "The data transformation\n\n```js\nconst reducer = (state) => {\n console.log('state: ', state);\n return state;\n};\n```",
135+
"tasks": [
136+
{
137+
"description": "Create a reducer and call it as the first param in your `createStore`",
138+
"tests": [
139+
"04/01"
140+
],
141+
"actions": [
142+
"open('index.js')"
143+
]
144+
}
145+
]
60146
}
61147
]
62148
}

‎tutorial/03/01.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
var chai = require('chai');
2+
var spies = require('chai-spies');
3+
var expect = chai.expect;
4+
chai.use(spies);
5+
6+
var spy = chai.spy.on(console, 'log');
7+
8+
/// load('index.js')
9+
10+
describe('01 voteUp Action', () => {
11+
12+
it('isn\'t created', () => {
13+
try {
14+
// future test cases
15+
if (voteUp()) {
16+
expect(voteUp().type).to.equal('VOTE_UP');
17+
}
18+
} catch (e) {
19+
expect(voteUp).to.deep.equal({ type: 'VOTE_UP' });
20+
}
21+
});
22+
23+
});

‎tutorial/03/02.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
describe('02 voteUp Action Creator', () => {
2+
3+
it('isn\'t created', () => {
4+
expect(voteUp().type).to.equal('VOTE_UP');
5+
});
6+
7+
});

‎tutorial/03/03.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
describe('03 voteUp Action Creator', () => {
2+
3+
it('doesn\'t have an id passed in', () => {
4+
expect(voteUp().type).to.equal('VOTE_UP');
5+
});
6+
7+
it('doesn\'t have a payload with an id', () => {
8+
expect(voteUp(1).payload).to.deep.equal({ id: 1});
9+
});
10+
11+
});

‎tutorial/03/04.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
describe('04 voteUp Action Type', () => {
2+
3+
it('doesn\'t exist', () => {
4+
expect(VOTE_UP).to.equal('VOTE_UP');
5+
});
6+
7+
});

‎tutorial/03/index.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
## Actions
2+
Events that change the data.
3+
4+
##### 1. Actions
5+
```js
6+
const action = { type: 'ACTION_NAME' };
7+
```
8+
9+
##### 2. Action Creators
10+
11+
```js
12+
const actionName = () => ({ type: 'ACTION_NAME' });
13+
```
14+
15+
##### 3. Action Types
16+
17+
```js
18+
const ACTION_NAME = 'ACTION_NAME'
19+
```
20+
21+
+ create an action called `voteUp`
22+
@test('03/01')
23+
@action(open('index.js'))
24+
25+
+ change `voteUp` into an action creator.
26+
@test('03/02')
27+
28+
+ add a param of `id` to your action creator
29+
@test('03/03')
30+
31+
+ create an action type for `voteUp`
32+
@hint('const VOTE_UP = 'VOTE_UP')
33+
@test('03/04')

‎tutorial/04/01.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
var chai = require('chai');
2+
var spies = require('chai-spies');
3+
var expect = chai.expect;
4+
chai.use(spies);
5+
6+
var spy = chai.spy.on(console, 'log');
7+
8+
/// load('index.js')
9+
10+
describe('01 reducer', () => {
11+
12+
});

‎tutorial/04/02.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
describe('02 reducer', () => {
2+
3+
});

‎tutorial/04/index.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
## Reducer
2+
The data transformation
3+
4+
```js
5+
const reducer = (state) => {
6+
console.log('state: ', state);
7+
return state;
8+
};
9+
```
10+
11+
+ Create a reducer and call it as the first param in your `createStore`
12+
@test('04/01')
13+
@action(open('index.js'))

‎tutorial/tutorial.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,5 @@ A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.
44

55
@import('01')
66
@import('02')
7+
@import('03')
8+
@import('04')

0 commit comments

Comments
 (0)