You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: tutorial/02/index.md
+38-2Lines changed: 38 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -5,17 +5,53 @@ The "single source of truth".
5
5
conststore=createStore(reducer, initialState);
6
6
```
7
7
8
-
+ install Redux. Run`npm install --save redux`.
8
+
+ install Redux.
9
+
@hint('Run`npm install --save redux`.')
9
10
@action(open('index.js'))
10
11
@test('02/01')
11
12
12
-
+ import createStore.`import { createStore } from 'redux';`
13
+
+ import`createStore` from the redux module.
14
+
@hint('Add`import { createStore } from 'redux';`')
13
15
@test('02/02')
14
16
15
17
+ create your first store and call it`store`. Use a simple "reducer" function for now, let's say`state => state`.
18
+
@hint('declare your store,`const store`')
19
+
@hint('call store with a simple reducer,`const store = createStore(state => state)`')
16
20
@test('02/03')
17
21
18
22
+ log your store to the console and have a look.
19
23
@test('02/04')
24
+
@hint('`console.log(store)`')
25
+
26
+
+ log`store.getState()` to the console
27
+
@test('02/05')
28
+
@hint('`console.log(store.getState())`')
29
+
30
+
+ move the initial state to the top of the file, and pass it in as a second param your`createStore`
31
+
@test('02/06')
32
+
@hint('Move`initialState` above your`store`')
33
+
@hint('Pass in`initialState` as a second param to`createStore`')
34
+
@action(insert(
35
+
```
36
+
const initialState = {
37
+
pokemon: [{
38
+
id: 1,
39
+
name: 'Luvdisc',
40
+
description: 'This heart-shaped POKéMON earned its name by swimming after loving couples it spotted in the ocean’s waves.',
41
+
votes: 3
42
+
}, {
43
+
id: 2,
44
+
name: 'Trubbish',
45
+
description: 'Wanting more garbage, they follow people who litter. They always belch poison gas.',
46
+
votes: 2
47
+
}, {
48
+
id: 3,
49
+
name: 'Stunfisk',
50
+
description: 'Its skin is very hard, so it is unhurt even if stepped on by sumo wrestlers. It smiles when transmitting electricity.',
51
+
votes: 0
52
+
}]
53
+
};
54
+
```
55
+
))
20
56
21
57
@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.')