Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit36d97fc

Browse files
committed
step 3 & 4 progress
1 parent1432209 commit36d97fc

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
conststore=createStore(reducer, initialState);
4747
```
48+
49+
#####Actions
50+
51+
Events that change the data.
52+
53+
#####1. Actions
54+
```js
55+
constaction= { type:'ACTION_NAME' };
56+
```
57+
58+
#####2. Action Creators
59+
60+
```js
61+
constactionName= ()=> ({ type:'ACTION_NAME' });
62+
```
63+
64+
#####3. Action Types
65+
66+
```js
67+
constACTION_NAME='ACTION_NAME'
68+
```
69+
70+
#####Reducer
71+
72+
The data transformation
73+
74+
```js
75+
constreducer= (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+
varchai=require('chai');
2+
varspies=require('chai-spies');
3+
varexpect=chai.expect;
4+
chai.use(spies);
5+
6+
varspy=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+
constaction= { type:'ACTION_NAME' };
7+
```
8+
9+
#####2. Action Creators
10+
11+
```js
12+
constactionName= ()=> ({ type:'ACTION_NAME' });
13+
```
14+
15+
#####3. Action Types
16+
17+
```js
18+
constACTION_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+
varchai=require('chai');
2+
varspies=require('chai-spies');
3+
varexpect=chai.expect;
4+
chai.use(spies);
5+
6+
varspy=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+
constreducer= (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)
[8]ページ先頭
©2009-2025 Movatter.jp