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
You'll find this "setup" script located in your *package.json*.
39
+
40
+
41
+
---
42
+
43
+
We'll be installing a lot of scripts from terminal. You may also want to consider installing the atom package ["platformio-ide-terminal"](https://github.com/platformio/platformio-atom-ide-terminal), which provides a terminal inside your editor.
44
+
45
+
##### The Store
46
+
47
+
The "single source of truth".
48
+
49
+
```js
50
+
conststore=createStore(reducer, initialState);
51
+
```
52
+
53
+
##### Actions
54
+
55
+
Events that change the data.
56
+
57
+
##### 1. Actions
58
+
```js
59
+
constaction= { type:'ACTION_NAME' };
60
+
```
61
+
62
+
##### 2. Action Creators
63
+
64
+
```js
65
+
constactionName= () => ({ type:'ACTION_NAME' });
66
+
```
67
+
68
+
##### 3. Action Types
69
+
70
+
```js
71
+
constACTION_NAME='ACTION_NAME'
72
+
```
73
+
74
+
##### Reducer
75
+
76
+
The data transformation
77
+
78
+
```js
79
+
constreducer= (state) => {
80
+
console.log(state);
81
+
return state;
82
+
};
83
+
```
84
+
85
+
##### Pure Functions
86
+
87
+
Reducers must be pure functions
88
+
89
+
State is "read only".
90
+
91
+
Notes
92
+
```js
93
+
constnextPokemon=state.pokemon.map(p=> {
94
+
if (id ===p.id) {
95
+
p.votes+=1;
96
+
}
97
+
return p;
98
+
});
99
+
return {
100
+
pokemon: nextPokemon
101
+
};
102
+
```
103
+
31
104
##### Combine Reducers
32
105
33
106
Create modular, composable reducers with `combineReducers`.
"description": "A [CodeRoad](https://coderoad.github.io) tutorial for learning Redux.\n\n<!-- @import('08') -->\n<!-- @import('09') -->"
5
5
},
6
6
"pages": [
7
+
{
8
+
"title": "Project Setup",
9
+
"description": "Getting a project setup is rarely easy. Luckily, we have a quick script that can do the work for us.\n\n---\n\nRunning `> npm run setup` will do the following:\n\n1. Install package dev dependencies\n2. Create an output directory called \"dist\"\n3. Install \"concurrently\" & \"browser-sync\" globally\n4. Run our app in the browser\n\nYou'll find this \"setup\" script located in your *package.json*.\n\n\n---\n\nWe'll be installing a lot of scripts from terminal. You may also want to consider installing the atom package [\"platformio-ide-terminal\"](https://github.com/platformio/platformio-atom-ide-terminal), which provides a terminal inside your editor.",
10
+
"tasks": [
11
+
{
12
+
"description": "Open a terminal in this project directory and run `npm run setup`.",
13
+
"tests": [
14
+
"01/01"
15
+
],
16
+
"hints": [
17
+
"Open a terminal in this project directory and run `npm run setup` to get setup"
"onPageComplete": "Continue to start working with Redux"
36
+
},
37
+
{
38
+
"title": "The Store",
39
+
"description": "The \"single source of truth\".\n\n```js\nconst store = createStore(reducer, initialState);\n```",
40
+
"tasks": [
41
+
{
42
+
"description": "install Redux.",
43
+
"hints": [
44
+
"Run `npm install --save redux`."
45
+
],
46
+
"actions": [
47
+
"open('index.js')"
48
+
],
49
+
"tests": [
50
+
"02/01"
51
+
]
52
+
},
53
+
{
54
+
"description": "import `createStore` from the redux module.",
55
+
"hints": [
56
+
"Add `import { createStore } from 'redux';`"
57
+
],
58
+
"tests": [
59
+
"02/02"
60
+
]
61
+
},
62
+
{
63
+
"description": "create your first store and call it `store`. Use a simple \"reducer\" function for now, let's say `state => state`.",
64
+
"hints": [
65
+
"declare your store, `const store`",
66
+
"call store with a simple reducer, `const store = createStore(state => state)`"
67
+
],
68
+
"tests": [
69
+
"02/03"
70
+
]
71
+
},
72
+
{
73
+
"description": "log your store to the console and have a look.",
74
+
"tests": [
75
+
"02/04"
76
+
],
77
+
"hints": [
78
+
"console.log(store)"
79
+
]
80
+
},
81
+
{
82
+
"description": "log `store.getState()` to the console",
83
+
"tests": [
84
+
"02/05"
85
+
],
86
+
"hints": [
87
+
"console.log(store.getState())"
88
+
]
89
+
},
90
+
{
91
+
"description": "move the initial state to the top of the file, and pass it in as a second param your `createStore`",
92
+
"tests": [
93
+
"02/06"
94
+
],
95
+
"hints": [
96
+
"Move `initialState` above your `store`",
97
+
"Pass in `initialState` as a second param to `createStore`"
98
+
],
99
+
"actions": [
100
+
"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')"
101
+
]
102
+
}
103
+
],
104
+
"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."
"description": "Pass an action as a second param to the reducer",
182
+
"tests": [
183
+
"04/03"
184
+
]
185
+
},
186
+
{
187
+
"description": "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)`",
188
+
"tests": [
189
+
"04/04"
190
+
]
191
+
},
192
+
{
193
+
"description": "Create a `switch` statement and pass in `action.type`, the default return should return `state`",
194
+
"tests": [
195
+
"04/05"
196
+
]
197
+
},
198
+
{
199
+
"description": "The `switch` statement should have a `default` case that returns the state",
200
+
"tests": [
201
+
"04/06"
202
+
]
203
+
},
204
+
{
205
+
"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;`",
206
+
"tests": [
207
+
"04/07"
208
+
]
209
+
}
210
+
],
211
+
"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"
212
+
},
213
+
{
214
+
"title": "Pure Functions",
215
+
"description": "Reducers must be pure functions\n\nState is \"read only\".\n\nNotes\n```js\nconst nextPokemon = state.pokemon.map(p => {\n if (id === p.id) {\n p.votes += 1;\n }\n return p;\n });\n return {\n pokemon: nextPokemon\n };\n ```",
216
+
"tasks": [
217
+
{
218
+
"description": "Return a new list of Pokemon after incrementing \"votes\" of the pokemon with the matching \"id\"",
219
+
"tests": [
220
+
"05/01"
221
+
]
222
+
},
223
+
{
224
+
"description": "Let's make a test to see that we are truly returning a new state. Call `Object.freeze()` on your `initialState`. `freeze` makes an object immutable - meaning the object can not be changed. And yet your reducer should still work, since it returns a new state each call.",
225
+
"tests": [
226
+
"05/02"
227
+
]
228
+
},
229
+
{
230
+
"description": "What if we were dealing with multiple keys on the state. We'd have to ensure that our changes return a complete new state each time. Use `Object.assign`",
"onPageComplete": "Now that you have an idea of how reducers work. Next we can look at how to create multiple, modular reducers."
240
+
},
7
241
{
8
242
"title": "Combine Reducers",
9
243
"description": "Create modular, composable reducers with `combineReducers`.",
@@ -66,13 +300,48 @@
66
300
]
67
301
},
68
302
{
69
-
"description": "We no longer pass the entire \"state\" inside of our reducers, only the slice of our state the reducer needs to know. Rename all references to \"state\" inside of your \"pokemon\" reducer to what it really is now: \"pokemon\".",
303
+
"description": "We no longer pass the entire \"state\" inside of our reducers, only the slice of our state the reducer needs to know. Rename all references to \"state\" inside of your \"pokemon\" reducer to what it really is now: \"pokemon\".\nUsing thunks for async actions.",
70
304
"tests": [
71
305
"06/07"
306
+
],
307
+
"hints": [
308
+
"Change three references to \"pokemon\" in your pokemon reducer",
0 commit comments