Udemy - Redux Flashcards
1
Q
What is Redux?
A
A library that makes it possible to manage more complex state.
2
Q
What is the Redux store?
A
An object.
3
Q
Give an example of a Redux store:
A
{
expenses: [{
_id: 'abc',
description: 'rent',
amount: 109500
}]
}
4
Q
What are the shortcomings of using component state?
A
In complex apps, there may be no clear parent component where we can store the state.
Components aren’t reusable if they need things from the parent.
5
Q
What two things can each component define in Redux?
A
What data it needs.
What data it needs to be able to change.
6
Q
How do you install Redux?
A
yarn add redux@x
7
Q
What’s the first thing you do in Redux?
A
Import the createStore function.
8
Q
How would you import the store function from Redux?
A
import { createStore } from ‘redux’;
9
Q
How many times would you call createStore?
A
Once.
10
Q
How would you create a store?
A
const store = createStore((state = { count: 0 }) => {
return state;
});
11
Q
Can you call createStore without any arguments?
A
No.
12
Q
What is the first argument createStore expects?
A
A function (state).
13
Q
What does state mean in this code?
const store = createStore((state) => {
return state;
});
A
The current state.
14
Q
What does state = { count: 0 } mean in this code?
const store = createStore((state = { count: 0 }) => {
return state;
});
A
Because we don’t have a constructor function where we set up the default we set it up here.
15
Q
What does the store.getState() method do?
A
Returns the current state object.
16
Q
How could you view the state object in this code in the console?
const store = createStore((state = { count: 0 }) => {
return state;
});
A
console.log(store.getState());
17
Q
What do actions allow us to do?
A
Change the Redux store.
18
Q
What is an action?
A
An object that gets sent to the store. This object describes the type of action we’d like to take.
19
Q
How do you create an action?
A
Define an object, with a type property.
20
Q
What is the single property you have to define on an action?
A
The type property.
21
Q
What Redux convention does the action objects type property value use?
A
Written in all upper case with an underscore to separate multiple words.
22
Q
What do you do after you define a type property on an action object?
A
Send it to the store.
23
Q
How would you send an action to the store.
A
By calling a method on store called store.dispatch();
24
Q
What does dispatch allow us to do?
A
Send off an action object.
25
How would you use store.dispatch() with an action.
Put the action object in the dispatch method.
26
Show an example of using store.dispatch() with an action.
store.dispatch({
type: 'INCREMENT'
});
27
What happens to the store when using this code?
store.dispatch({
type: 'INCREMENT'
});
The createStore function runs again.
28
How can you verify that store.dispatch is calling the createStore function again?
Log a comment in the createStore function body.
```
const store = createStore((state = { count: 0 }) => {
console.log('running');
return state;
});
```
29
How does the store get access to the action object?
It gets passed in as the second argument to createStore function.
30
Show how you would write the createStore function to have access to the action object:
```
const store = createStore((state = { count: 0 }, action) => {
console.log('running');
return state;
});
```
31
Is it a good idea to pass in a default action as the second parameter to the createStore function?
No, because the action will get passed in.
32
What can we do when the createStore function has access to action?
We can combine the current action with the state to figure out what the new state should be.
33
How could you use action in the createStore function?
You could use an if statement to check the 'type' of action and then do something.
34
Show a simple example of what the createStore functions body would look like if you wanted to increment a count:
```
if (action.type === 'INCREMENT') {
return {
count: state.count + 1
};
} else {
return state;
}
```
35
What is noteworthy about 'count: state.count + 1'?
```
if (action.type === 'INCREMENT') {
return {
count: state.count + 1
};
} else {
return state;
}
```
The state isn't changed. It's not a good idea to change the state or the action. Instead you want to use those values to compute the new state, that's what gets returned.
36
How would you convert this if statement to a switch statement?
```
if (action.type === 'INCREMENT') {
return {
count: state.count + 1
};
} else {
return state;
}
```
```
switch (action.type) {
case 'INCREMENT':
return {
count: state.count + 1
};
default:
return state;
}
```
37
Does store.getState() rerun when the store changes?
No.
38
Why do we need to be able to know when the store changes?
So we can re-render our application.
39
How can you watch for changes to the Redux store state?
You can use store.subscribe()
40
What is store.subscribe()
A function.
41
What do you pass to store.subscribe()
A single function.
42
What's not worthy about the function you pass to store.subscribe()
It get called every time the store changes.
43
Show a simple example of using store.subscribe()
store.subscribe(() => {
console.log(store.getState());
});
44
What does this code do?
store.subscribe(() => {
console.log(store.getState());
});
Logging the state to the console every time it changes.
45
How would you stop subscribing to the store?
Call the return value of subscribe (a function).
46
What is something you would have to do to store.subscribe() before you can call its return value?
Save it as a variable.
47
Show a simple example of how you would unsubscribe from the store:
```
const unsubscribe = store.subscribe(() => {
console.log(store.getState());
});
```
unsubscribe();
48
What will happen if you have an undefined type property in an action?
It will throw an error.
49
How would you use 'incrementBy', which may or may not be present, in the store?
store.dispatch({
type: 'INCREMENT',
incrementBy: 5
});
You would use some conditional logic, specifically the ternary operator.
50
Show how you would you use 'incrementBy', which may or may not be present, in the store?
store.dispatch({
type: 'INCREMENT',
incrementBy: 5
});
```
switch (action.type) {
case 'INCREMENT':
const incrementBy = typeof action.incrementBy === 'number' ? action.incrementBy : 1;
return {
count: state.count + incrementBy
};
default:
return state;
}
```
51
How can you use action that have require types?
By using them directly as opposed to checking if they exist.
52
Give an example of how you would handle this action in the store:
store.dispatch({
type: 'SET',
count: 101
});
```
switch (action.type) {
case 'SET':
return {
count: action.count
};
default:
return state;
}
```
53
What does ES6 Object Destructuring allow us to do?
Easily work with arrays and objects.
54
```
const person = {
name: 'Chris',
age: 32,
location: {
town: 'Barry',
temp: 20
}
}
```
How could you use object destructuring to improve the following line of code?
console.log(`${person.name} is ${person.age}.`);
const { name, age } = person;
console.log(`${name} is ${age}.`);
55
```
const person = {
name: 'Chris',
age: 32,
location: {
town: 'Barry',
temp: 20
}
}
```
How could you use object destructuring to improve the following line of code?
if (person.location.town && person.location.temp) {
console.log(`It's ${person.location.temp} in ${person.location.town}.`);
};
const { town, temp } = person.location;
if (town && temp) {
console.log(`It's ${temp} in ${town}.`);
};
56
What could go wrong in this code?
if (person.location.town && person.location.temp) {
console.log(`It's ${person.location.temp} in ${person.location.town}.`);
};
A temp of 0 would result in fasly. You could use typeof to fix that.
57
How would you rename 'temp' in this destructued object?
const { town, temp } = person.location;
const { town, temp: temperature } = person.location;
58
How would you set up a default value in this destructued object?
const { name, age } = person;
const { name = 'Anonymous', age } = person;
59
How would you set up both a default value and rename it in this destructured object?
const { name, age } = person;
const { name: firstName = 'Anonymous', age } = person;
60
What is the problem with this code?
const address = [''1299 S Street, 'London', 'England', '14430'];
console.log(`You are in ${address[1]}, ${address[2]}.`);
It's not clear what address[1] is.
61
How would you use array destructuring here?
const address = [''1299 S Street, 'London', 'England', 'CF93 2LM'];
console.log(`You are in ${address[1]}, ${address[2]}.`);
const [, city, country] = address;
console.log(`You are in ${city}, $country}.`);
62
How would you set a default to this destructured array?
const [, city, country] = address;
const [, city, country = 'UK'] = address;
63
What is an action generator?
A function that returns an action object.
64
What does an action generator mean for our code so far?
The objects that we have created via store.dispatch() will now be created in one place, and we'll have a function we can call to generate the action objects.
65
What's the first step in creating an action generator?
Creating a function.
const incrementCount = () => {
};
66
What's the goal of an action generator.
To be a simple function that takes input in, and returns the new action object.
67
Show an action generator returning a new action object:
```
const incrementCount = () => {
return {
type: 'INCREMENT'
};
};
```
68
How could you improve this code?
```
const incrementCount = () => {
return {
type: 'INCREMENT'
};
};
```
By implicitly returning the object.
```
const incrementCount = () => ({
type: 'INCREMENT'
});
```
69
What do you need to do when implicitly returning objects?
Wrap the object in parentheses.
70
How would you call this function?
```
const incrementCount = () => ({
type: 'INCREMENT'
});
```
store.dispatch(incrementCount());
71
What's one of the disadvantages of manually generating your objects like this?
store.dispatch({
type: 'INCREMENT',
incrementBy: 5
});
They're susceptible to typos which aren't easy to catch. You also get the advantage of auto completion by using action generators.
72
How would you set up this action generator to handle custom data that's needed?
```
const incrementCount = () => ({
type: 'INCREMENT'
});
```
```
const incrementCount = (payload = {}) => ({
type: 'INCREMENT',
incrementBy: ...
});
```
73
How would you dispatch an object with an incrementBy argument in this code?
store.dispatch(incrementCount());
store.dispatch(incrementCount({ incrementBy: 5 }));
74
What is happening with the payload argument here?
```
const incrementCount = (payload = {}) => ({
type: 'INCREMENT'
});
```
If payload doesn't exist, it's going to default to an empty object.
75
What do you need to consider when setting up 'incrementBy' in the function body?
```
const incrementCount = (payload = {}) => ({
type: 'INCREMENT',
incrementBy: ...
});
```
You have to set it up for every single instance of the action object, which means we're going to come up with a default here as opposed to the createStore() function.
76
Show how you would set up the defaults on incrementBy:
```
const incrementCount = (payload = {}) => ({
type: 'INCREMENT',
incrementBy: ...
});
```
```
const incrementCount = (payload = {}) => ({
type: 'INCREMENT',
incrementBy: typeof payload.incrementBy === 'number' ? payload.incrementBy : 1
});
```
77
When you set up the default in the action generator what would you do to this code?
```
switch (action.type) {
case 'INCREMENT':
const incrementBy = typeof action.incrementBy === 'number' ? action.incrementBy : 1;
return {
count: state.count + incrementBy
};
default:
return state;
}
```
Remove the const and access incrementBy from action, knowing it's always going to be set and set correctly.
```
switch (action.type) {
case 'INCREMENT':
return {
count: state.count + action.incrementBy
};
default:
return state;
}
```
78
Why do you need the default here?
```
const incrementCount = (payload = {}) => ({
type: 'INCREMENT'
});
```
If you remove the default and you had a situation where you didn't pass anything into incrementCount(), you would be trying to access a property (incrementBy) on an object (payload) that is undefined, which will throw a type error.
79
What's important to note about destructuring?
We can destructure on a full line or we can destructure arguments that get passed into functions.
80
How would you set up add in this example?
console.log(add({ a: 1, b:12 }));
```
const add = (data) => {
return data.a + data.b;
};
```
81
How would you destructure this object?
```
const add = (data) => {
return data.a + data.b;
};
```
Remove the name and use curly braces instead. Here, we are destructuring the first argument that gets passed into add. In this case, we know it's going to be an object, so it's valid to set this up.
```
const add = ({ a, b }) => {
return a + b;
};
```
See: Refactoring and Organizing @ 8:31
82
How would you set up another argument if you wanted to pass something else in?
console.log(add({ a: 1, b:12 }, c: 100));
```
const add = ({ a, b }) => {
return a + b;
};
```
```
const add = ({ a, b }, c) => {
return a + b + c;
};
```
83
What's the first thing you would do if you want to set up default values in this code?
```
const incrementCount = (payload = {}) => ({
type: 'INCREMENT',
incrementBy: typeof payload.incrementBy === 'number' ? payload.incrementBy : 1
});
```
Replace payload with an object.
```
const incrementCount = ({} = {}) => ({
type: 'INCREMENT',
incrementBy: typeof payload.incrementBy === 'number' ? payload.incrementBy : 1
});
```
At this point, we're not destructuring anything.
84
What do we want to destructure in this example?
```
const incrementCount = ({} = {}) => ({
type: 'INCREMENT',
incrementBy: typeof payload.incrementBy === 'number' ? payload.incrementBy : 1
});
```
incrementBy.
85
Destructure incrementBy in this code:
```
const incrementCount = ({} = {}) => ({
type: 'INCREMENT',
incrementBy: typeof payload.incrementBy === 'number' ? payload.incrementBy : 1
});
```
```
const incrementCount = ({ incrementBy } = {}) => ({
type: 'INCREMENT',
incrementBy: typeof incrementBy === 'number' ? incrementBy : 1
});
```
86
What does destructuring do here?
```
const incrementCount = ({ incrementBy } = {}) => ({
type: 'INCREMENT',
incrementBy: typeof incrementBy === 'number' ? incrementBy : 1
});
```
It gives us access to the incrementBy value off of the first object, so we can access it directly, hence deleting the payload object.
87
How can we take destructuring one step further here?
```
const incrementCount = ({ incrementBy } = {}) => ({
type: 'INCREMENT',
incrementBy: typeof incrementBy === 'number' ? incrementBy : 1
});
```
We can set up the default value in the ...
```
const incrementCount = ({ incrementBy = 1 } = {}) => ({
type: 'INCREMENT',
incrementBy: incrementBy
});
```
88
How can we simplify this code?
```
const incrementCount = ({ incrementBy = 1 } = {}) => ({
type: 'INCREMENT',
incrementBy: incrementBy
});
```
When we're setting an object property equal to a variable name with the same name we can do this:
```
const incrementCount = ({ incrementBy = 1 } = {}) => ({
type: 'INCREMENT',
incrementBy
});
```
89
What can this be simplified as?
```
const incrementCount = (payload = {}) => ({
type: 'INCREMENT',
incrementBy: typeof payload.incrementBy === 'number' ? payload.incrementBy : 1
});
```
```
const incrementCount = ({ incrementBy = 1 } = {}) => ({
type: 'INCREMENT',
incrementBy
});
```
90
How would the '1' get set in this code?
```
const incrementCount = ({ incrementBy = 1 } = {}) => ({
type: 'INCREMENT',
incrementBy
});
```
It's going to get set equal to 1 if there's an object provided and it doesn't include 'incrementBy'. If there is no object provided, the default is going to be an empty object. When we try to destructure that empty object we're not going to have incrementBy, so the end result is 1.
See: Refactoring and Organizing 16:41.
91
What's the next step in creating an action generator here?
```
const decrementCount = () => ({
type: 'INCREMENT'
});
```
Destructure the argument that gets passed in and then if it doesn't exist, start it off as an empty object.
```
const decrementCount = ({decrementBy = 1} = {}) => ({
type: 'INCREMENT',
decrementBy
});
```
NOTE: if decrementBy doesn't exist it will default to 1.
92
What is the function inside the createStore method? called?
A reducer.
93
What does the reducer do?
It determines what to do based off an action. How do we want to change the state.
94
How would you convert this code to be it's own reducer?
```
const store = createStore((state = { count: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return {
count: state.count + action.incrementBy
};
case 'DECREMENT':
return {
count: state.count - action.decrementBy
};
case 'SET':
return {
count: action.count
};
case 'RESET':
return {
count: 0
};
default:
return state;
}
});
```
const store = createStore(countReducer);
```
const countReducer = (state = { count: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return {
count: state.count + action.incrementBy
};
case 'DECREMENT':
return {
count: state.count - action.decrementBy
};
case 'SET':
return {
count: action.count
};
case 'RESET':
return {
count: 0
};
default:
return state;
}
}
```
95
What are some key attributes of a reducer?
They are pure functions.
You never want to change state or action. Instead you should read things off them and return an object that represents the new state.
96
What does combineReducers allow us to do?
Create multiple functions that define how our Redux application changes, and combine them together.
97
Give an example of creating a static final state:
```
const demoState = {
expenses = [{
id: 'asdfsafsaff',
description: 'yada yada',
note: 'yada yada',
amount: 54500,
createdAt: 0
}],
filters: {
text: 'rent',
sortBy: 'amount', // date or amount
startDate: undefined,
endDate: underfined
}
};
```
98
How would you set up a more complex default state for the reducer?
Create a variable for the default value and reference the variable inline.
99
Show how you would set up a more complex default state for the reducer?
const expensesReducerDefaultState = [...];
const expensesReducer = (state = expensesReducerDefaultState, action) => {
};
100
How would you complete this reducer to its most basic sense?
const expensesReducer = (state = expensesReducerDefaultState, action) => {
};
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
default:
return state;
}
};
```
101
How could you take a look at what the (default?) state is?
const store = createStore(expensesReducer);
console.log(store.getState());
NOTE: This isn't reactive (we haven't put it in subscribe) so it'll fire a single time.
102
How would you get the default array to live on the expenses property?
We need to change the call to createStore()
const store = createStore(expensesReducer);
```
const store = createStore(
combineReducers({
expenses: expensesReducer
})
);
```
NOTE: If you were logging the (default) state to the store, it would change from [], to Object {expenses: Array(0)}. Now the redux store is an object, with a property expenses which is where the array lives.
NOTE: The goals of this was to get the array moved off of the actual store itself and into a property (in this case expenses on the root object).
103
What does combineReducers() function do?
Lets you combine multiple reducers to create a single store.
104
What argument does combineReducers() take?
An object. On the object we provide key value pairs. The key is the root state name (eg. expenses, filters) and the value is the reducer that's supposed to manage it (eg. expensesReducer).
105
Why, when you use this code does logging the state to the console look different?
const store = createStore(expensesReducer);
vs.
```
const store = createStore(
combineReducers({
expenses: expensesReducer
})
);
```
Previously, we took expensesReducer and we passed that directly into create store. createStore called out reducer (it calls the reducer once right away) with no state and no action. So the end result was the default state getting set and then there was no action type. As there was no action type we had the state returned, and the empty array became the redux store value. We're doing the same thing with combineReducers accept we're saying why don't we create an object like this ({ expenses: expensesReducer }) and put the array on the expenses property.
SEE: Working with Multiple Reducers 7:33
106
sdf
zssf
107
sdfasf
asdfasf
108
asdfsafd
sdfasf
109
asdfsafd
asdfsadf
110
asdfsadf
asdfasdf
111
Show an example of setting up an object as a default state:
```
const filtersReducerDefaultState = {
text: '',
sortBy: 'date',
startDate: undefined,
endDate: underfined
};
```
112
Create a reducer that uses this default state:
```
const filtersReducerDefaultState = {
text: '',
sortBy: 'date',
startDate: undefined,
endDate: underfined
};
```
```
const filtersReducer = (state = filtersReducerDefaultState, action) => {
switch (action.type) {
default:
return state;
}
};
```
113
How would you register a second reducer on combineReducers()?
```
const store = createStore(
combineReducers({
expenses: expensesReducer,
filters: filtersReducer
})
);
```
114
What does the ES6 spread operator allow in Redux?
It makes it easier to work with arrays and objects.
115
Write a simple action generator:
```
const addExpense = (
{
description = '',
note = '',
amount = 0,
createdAt = 0} = {}
) => ({
type: 'ADD_EXPENSE',
expense: {
id: uuid(),
description,
note,
amount,
createdAt
}
});
```
NOTE: We're implicitly returning the action object.
NOTE: We're using destructuring (Which has been broken up on different lines to make it more readable).
NOTE: We're using property shorthand.
116
How could you create unique id's?
By using the npm library, uuid (universally unique identifiers).
117
How would you install uuid?
yarn add uuid@x
118
How would you import uuid?
import uuid from 'uuid';
119
How would you call uuid?
uuid()
120
How would you call this action generator?
```
const addExpense = (
{
description = '',
note = '',
amount = 0,
createdAt = 0} = {}
) => ({
type: 'ADD_EXPENSE',
expense: {
id: uuid(),
description,
note,
amount,
createdAt
}
});
```
store.subscribe(() => {
console.log(store.getState());
});
Below where the store gets defined:
store.dispatch(addExpense({
description: 'Rent',
amount: 54500
}));
NOTE: We don't have to provide all the values outlined.
The dispatched action (the action with the type 'ADD_EXPENSE') is going to get dispatched to both reducers (expensesReducer, filtersReducer).
121
93.
How would you set up the expensesReducer to handle dispatching an action?
const expensesReducerDefaultState = [...];
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
default:
return state;
}
};
```
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return state.concat(action.expense);
default:
return state;
}
};
```
NOTE: As we know state is an array we might be tempted to use state.push(action.expense) to manipulate the array. The problem with this is that .push changes the original array.
122
How would you convert .concat to use the ES6 spread operator functionality?
const names = ['Bill', 'Ben'];
names.concat('John');
[...names, 'John']
123
How would you convert this code to use the ES6 spread operator functionality?
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return state.concat(action.expense);
default:
return state;
}
};
```
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return [
...state
action.expense
];
default:
return state;
}
};
```
124
What's noteworthy when dispatching something?
You get the action object from store.dispatch(); This means if you dispatch an cation object, it comes back as the return value from the call to dispatch and we could create a variable to store it.
125
How would you create a variable that stores the action object from store.dispatch()
```
const expenseOne = store.dispatch(addExpense({
description: 'Rent',
amount: 54500
}));
```
```
const expenseTwo = store.dispatch(addExpense({
description: 'Coffee',
amount: 500
}));
```
126
What does this variable equal?
```
const expenseOne = store.dispatch(addExpense({
description: 'Rent',
amount: 54500
}));
```
The action object.
127
How would you write the function call to delete an entry?
Here, we dispatch an action object that comes back from removeExpense:
store.dispatch(removeExpense({
id: expenseOne.expense.id
}));
128
How would you create the removeExpense action generator?
NOTE: Here, we're implicitly returning an object.
NOTE: We're using destructuring.
```
const removeExpense = ({ id } = {}) => ({
type: 'REMOVE_EXPENSE',
id
});
```
129
How would you handle removeExpense on the expensesReducer?
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return [
...state
action.expense
];
default:
return state;
}
};
```
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return [
...state
action.expense
];
case 'REMOVE_EXPENSE':
return state.filter(({ id }) => {
return id !== action.id;
});
default:
return state;
}
};
```
NOTE: if the function passed into .filter return as true the item will be kept in the array, it it returns false the item will be removed.
NOTE: the individual item could've been called something like expense, however, we destructureing the expense and getting id.
130
What is noteworthy about .filter
.filter doesn't change the array its called on, and returns a new array with the subset of the values.
131
How could you simplify this code?
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return [
...state
action.expense
];
case 'REMOVE_EXPENSE':
return state.filter(({ id }) => {
return id !== action.id;
});
default:
return state;
}
};
```
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return [
...state
action.expense
];
case 'REMOVE_EXPENSE':
return state.filter(({ id }) => id !== action.id);
default:
return state;
}
};
```
132
How would you add all of the properties from user to a new object?
```
const user = {
name: 'John',
age: 30
};
```
console.log({
...user
});
133
What's noteworthy about the ES6 object spread operator?
It's not universally compatible with browsers.
134
How can we get the ES6 object spread operator to work in all browsers?
By using a babel plugin.
135
How would you install a babel plugin so we can use ES6 object spread operators universally?
yarn add babel-plugin-transform-object-rest-spread@?
136
How would you include babel-plugin-transform-object-rest-spread in a project?
List it in the plugins array in .babelrc
"plugins": [
"transform-object-rest-spread"
]
137
How would you add properties on an object spread operator?
console.log({
...user
});
console.log({
...user,
location: 'UK'
});
138
How could you override existing properties using the object spread operator?
```
const user = {
name: 'John',
age: 30
};
```
```
console.log({
...user,
location: 'UK',
age: 31
});
```
NOTE: You must define extra properties after the spread operator.
139
How would you use an editExpense function?
store.dispatch(editExpense(expenseTwo.expense.id, { amount: 500 }));
140
What details do we need to give editExpense when dispatching?
The id of what we're trying to edit and what we're trying to edit, which will be the updates object.
141
How would you create the action generator for editExpense?
NOTE: There's no need for id or updates to have defaults.
NOTE: We're implicitly returning an object.
```
const editExpense (id, updates) => ({
type: 'EDIT_EXPENSE',
id,
updates
});
```
142
How would you handle 'EDIT_EXPENSE'?
```
const editExpense (id, updates) => ({
type: 'EDIT_EXPENSE',
id,
updates
});
```
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return [
...state
action.expense
];
case 'REMOVE_EXPENSE':
return state.filter(({ id }) => id !== action.id);
default:
return state;
}
};
```
```
const expensesReducer = (state = expensesReducerDefaultState, action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return [
...state
action.expense
];
case 'REMOVE_EXPENSE':
return state.filter(({ id }) => id !== action.id);
case 'EDIT_EXPENSE':
return state.map((expense) => {
if (expense.id === action.id) {
return {
...expense,
...action.updates
};
} else {
return expense;
};
})
default:
return state;
}
};
```
143
What does returning a call to state.map allow us?
To go through every item in an array?
144
How would you call setTextFilter()
store.dispatch(setTextFilter('rent'));
145
How would you set up the setTextFilter() action object?
NOTE: If no 'text' value is provided, it will default to an empty string.
NOTE: We implicitly return an object
```
const setTextFilter = (text = '') => ({
type: 'SET_TEXT_FILTER',
text
});
```
146
How would you add a case for setTextFilter() to the filters reducer?
```
const filtersReducer = (state = filtersReducerDefaultState, action) => {
switch (action.type) {
default:
return state;
}
};
```
NOTE: We don't have to mention this in the expenses reducer because the expenses reducers data isn't going to change if the text filter changes.
```
const filtersReducer = (state = filtersReducerDefaultState, action) => {
switch (action.type) {
case 'SET_TEXT_FILTER':
return {
...state,
text: action.text
};
default:
return state;
}
};
```
147
How would you dispatch sortByAmount()
store.dispatch(sortByAmount());
148
How would you create the sortByAmount() action generator function?
NOTE: We're implicitly returning an object here.
```
const sortByAmount = () => ({
type: 'SORT_BY_AMOUNT'
});
```
149
How would you dispatch sortByDate()
store.dispatch(sortByDate());
150
How would you create the sortByDate() action generator function?
NOTE: We're implicitly returning an object here.
```
const sortByDate = () => ({
type: 'SORT_BY_DATE'
});
```
151
How would you add the cases for sortByDate() and sortByAmount() in the filters reducer?
```
const filtersReducer = (state = filtersReducerDefaultState, action) => {
switch (action.type) {
case 'SET_TEXT_FILTER':
return {
...state,
text: action.text
};
default:
return state;
}
};
```
```
const filtersReducer = (state = filtersReducerDefaultState, action) => {
switch (action.type) {
case 'SET_TEXT_FILTER':
return {
...state,
text: action.text
};
case 'SORT_BY_AMOUNT':
return {
...state,
sortBy: 'amount'
};
case 'SORT_BY_DATE':
return {
...state,
sortBy: 'date'
};
default:
return state;
}
};
```
152
How would you create the setStartDate() action generator function?
NOTE: There's no need to set up a default of undefined for startDate because that's the value by default.
NOTE: We implicitly return an object.
```
const setStartDate = (startDate) => ({
type: 'SET_START_DATE',
startDate
});
```
153
How would you create the setEndDate() action generator function?
NOTE: There's no need to set up a default of undefined for endDate because that's the value by default.
NOTE: We implicitly return an object.
```
const setEndDate = (endDate) => ({
type: 'SET_END_DATE',
endDate
});
```
154
How would you call setEndDate() with and without a value?
store. dispatch(setStartDate(125));
| store. dispatch(setStartDate());
155
How would you call setEndDate()
store.dispatch(setStartDate(1250));
156
How would you add the cases for setStartDate() and setEndDate() in the filters reducer?
```
const filtersReducer = (state = filtersReducerDefaultState, action) => {
switch (action.type) {
case 'SET_TEXT_FILTER':
return {
...state,
text: action.text
};
case 'SORT_BY_AMOUNT':
return {
...state,
sortBy: 'amount'
};
case 'SORT_BY_DATE':
return {
...state,
sortBy: 'date'
};
default:
return state;
}
};
```
```
const filtersReducer = (state = filtersReducerDefaultState, action) => {
switch (action.type) {
case 'SET_TEXT_FILTER':
return {
...state,
text: action.text
};
case 'SORT_BY_AMOUNT':
return {
...state,
sortBy: 'amount'
};
case 'SORT_BY_DATE':
return {
...state,
sortBy: 'date'
};
case 'SET_START_DATE':
return {
...state,
startDate: action.startDate
};
case 'SET_END_DATE':
return {
...state,
endDate: action.endDate
};
default:
return state;
}
};
```
157
How would you set up the getVisibleExpenses() function to (temporarily) return all the expenses (neither filtering or sorting)?
```
const getVisibleExpenses = (expenses, filters) => {
return expenses;
};
```
158
What arguments does the getVisibleExpenses() function need?
expenses (the complete array that's going to be filtering and sorting) and filters.
159
What does passing in expenses and filters to the getVisibleExpenses() function allow us to do?
Calculate what the visible expenses should look like.
160
How would you add the getVisibleExpenses() call to store.subscribe()
NOTE: visibleExpenses gets set to the return value of getVisibleExpenses()??
```
store.subscribe(() => {
const state = store.getState();
const visibleExpenses = getVisibleExpenses(state.expenses, state.filters);
console.log(visibleExpenses);
});
```
161
What is the result of this code?
```
store.subscribe(() => {
const state = store.getState();
const visibleExpenses = getVisibleExpenses(state.expenses, state.filters);
console.log(visibleExpenses);
});
```
The arrays printing to the screen.
162
How would you destructure the filters argument to create variable for the individual ones with this code?
```
const getVisibleExpenses = (expenses, filters) => {
return expenses;
};
```
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses;
};
```
163
How would you filter the data in this code without filtering it at all?
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses;
};
```
NOTE: .filter allows us to return a subset of all of the expenses.
NOTE: When we have access to the individual expense, this allows us to determine whether or not it should be included in the visible expenses.
NOTE: .filter will only worry about text, startDate and endDate.
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch;
const endDateMatch;
const textMatch;
```
return startDateMatch && endDateMatch && textMatch
});
};
164
What is happening in the return portion of this code?
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch;
const endDateMatch;
const textMatch;
```
return startDateMatch && endDateMatch && textMatch
});
};
If startDateMatch, endDateMatch and textMatch are true the filter function will return true and the item will be kept in the array. If any of them are false the whole thing will result in false because we're using &&, resulting in the item being removed from the array.
165
What is a timestamp?
Any positive or negative integer value.
166
What do timestamps count in?
Milliseconds.
167
What does the timestamp 0 represent?
January 1st at midnight in 1970.
168
What is the January 1st, 1970 timestamp know by?
The unix epoch.
169
What does the timestamp 33400 represent?
33.4 seconds after midnight on January 1st 1970.
170
How would you add some filtering to this code?
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch;
const endDateMatch;
const textMatch;
```
return startDateMatch && endDateMatch && textMatch
});
};
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch = typeof startDate !== 'number' || expense.createdAt >= startDate;
const endDateMatch = typeof endDate !== 'number' || expense.createdAt <= endDate;
const textMatch;
```
return startDateMatch && endDateMatch && textMatch
});
};
171
What does
const startDateMatch = typeof startDate != 'number';
do in this code?
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch = typeof startDate !== 'number';
const endDateMatch;
const textMatch;
```
return startDateMatch && endDateMatch && textMatch
});
};
If the typeof startDate is not equal to a number it will always result in true. So, if startDate is undefined we're not going to take it into account when it comes to filtering. Therefore, it will always be true for non numbers which means we're not going to get into a situation where the startDate is going to have an affect on whether or not an expense is visible.
172
What is something to note about this line of code?
const startDateMatch = typeof startDate !== 'number' || expense.createdAt >= startDate;
If the startDate is indefined typeof startDate !== 'number' will result in true so startDateMatch will result in true (and in other part of the code) and the item won't be filtered.
If startDate is 2 and createdAt is 1, typeof startDate !== 'number' isn't going to be true so expense.createdAt >= startDate; will run. expense.createdAt is 1 and startDate is 2 expense.createdAt isn't greater than the start date so this one is going to get filtered out.
If startDate was 0 and created at was 1, created at would be greater than startDate and it would once again be included.
173
How would you test this code?
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch = typeof startDate !== 'number' || expense.createdAt >= startDate;
const endDateMatch = typeof endDate !== 'number' || expense.createdAt <= endDate;
const textMatch = true;
```
return startDateMatch && endDateMatch && textMatch
});
};
Set up some expenses and filters.
174
How would you set up some test expenses and filters?
```
const expenseOne = store.dispatch(addExpense({
description: 'Rent',
amount: 54500,
createdAt: 1000
}));
```
```
const expenseTwo = store.dispatch(addExpense({
description: 'Coffee',
amount: 500,
createdAt: -1000
}));
```
175
How would you set up the startDate and endDate filters?
store.dispatch(setStartDate(125));
176
What is the expected result of this code?
```
const expenseOne = store.dispatch(addExpense({
description: 'Rent',
amount: 54500,
createdAt: 1000
}));
```
```
const expenseTwo = store.dispatch(addExpense({
description: 'Coffee',
amount: 500,
createdAt: -1000
}));
```
store.dispatch(setStartDate(125));
Only expenseOne should show up.
177
How would you complete textMatch so if you enter some search text, only expenses that use that text value show up?
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch = typeof startDate !== 'number' || expense.createdAt >= startDate;
const endDateMatch = typeof endDate !== 'number' || expense.createdAt <= endDate;
const textMatch = true;
```
return startDateMatch && endDateMatch && textMatch
});
};
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch = typeof startDate !== 'number' || expense.createdAt >= startDate;
const endDateMatch = typeof endDate !== 'number' || expense.createdAt <= endDate;
const textMatch = expense.description.toLowerCase().includes(text.toLowerCase());
```
return startDateMatch && endDateMatch && textMatch
});
};
178
What does the includes method allow you to do?
See if one string includes another.
179
How would you set up some text filters?
store.dispatch(setTextFilter('rent'));
180
How would you use includes?
You call includes on a string, put the search string as the first argument and it returns true if the string is inside of your string, or false otherwise.
str.includes(searchString[, position])
181
How would you add the sortBy functionality to this code?
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch = typeof startDate !== 'number' || expense.createdAt >= startDate;
const endDateMatch = typeof endDate !== 'number' || expense.createdAt <= endDate;
const textMatch = expense.description.toLowerCase().includes(text.toLowerCase());
```
return startDateMatch && endDateMatch && textMatch
});
};
NOTE: The ternary operator is used on return.
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch = typeof startDate !== 'number' || expense.createdAt >= startDate;
const endDateMatch = typeof endDate !== 'number' || expense.createdAt <= endDate;
const textMatch = expense.description.toLowerCase().includes(text.toLowerCase());
```
return startDateMatch && endDateMatch && textMatch
}).sort((a, b) => {
if (sortBy === 'date') {
return a.createdAt < b.createdAt ? 1 : -1;
}
});
};
182
What is a compare function?
It allows us to write some code to determine which items should come first when looking at two distinct items.
183
How would you create a compare function?
```
function compare(a, b) {
if (a is less than b by some ordering criterion) {
return -1;
}
if (a is greater than b by the ordering criterion) {
return 1;
}
// a must be equal to b
return 0;
}
```
184
How would you create a compare function?
```
function compare(a, b) {
if (a is less than b by some ordering criterion) {
return -1;
}
if (a is greater than b by the ordering criterion) {
return 1;
}
// a must be equal to b
return 0;
}
```
185
How would you add How would you add the sortByAmount functionality to this code?
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch = typeof startDate !== 'number' || expense.createdAt >= startDate;
const endDateMatch = typeof endDate !== 'number' || expense.createdAt <= endDate;
const textMatch = expense.description.toLowerCase().includes(text.toLowerCase());
```
return startDateMatch && endDateMatch && textMatch
}).sort((a, b) => {
if (sortBy === 'date') {
return a.createdAt < b.createdAt ? 1 : -1;
}
});
};
```
const getVisibleExpenses = (expenses, { text, sortBy, startDate, endDate }) => {
return expenses.filter((expense) => {
const startDateMatch = typeof startDate !== 'number' || expense.createdAt >= startDate;
const endDateMatch = typeof endDate !== 'number' || expense.createdAt <= endDate;
const textMatch = expense.description.toLowerCase().includes(text.toLowerCase());
```
return startDateMatch && endDateMatch && textMatch
}).sort((a, b) => {
if (sortBy === 'date') {
return a.createdAt < b.createdAt ? 1 : -1;
} else if (sortBy === 'amount') {
return a.amount < b.amount ? 1 : -1;
}
});
};
186
test
```
export default const ExpenseForm extends React.Component {
state = {
description: '',
note: '',
amount: '',
createdAt: moment(),
calendarFocused: false,
error: ''
};
onDescriptionChange = (e) => {
// we need access to the argument as this is where the value lives (hence e)
const description = e.target.value;
this.setState(() => ({ description }));
};
onNoteChange = (e) => {
const note = e.target.value;
this.setState(() => ({ note }));
};
onAmountChange = (e) => {
const amount = e.target.value;
if (amount.match(/REGEX/)) {
this.setState(() => ({ amount }));
}
};
onDateChange = (createdAt) => {
if (!amount || amount.match(/REGEX/)) {
this.setState(() => ({ amount }));
}
};
onFocusChage = ({ focused }) => {
this.setState(() => ({ calendarFocsed: fucused }))
};
onSubmit = (e) => {
e.preventDefault();
if (!this.state.description || !this.state.amount) {
this.setState(() => ({ error: 'Please provide description and amount' }));
} else {
..
}
};
render() {
return (
< div >
..
< form onSubmit={this.onSubmit} >
< input
type="text"
placeholder="Description"
autoFocus
value={this.state.description}
onChange={this.onDescriptionChange}
/ >
< input
type="text"
placeholder="Amount",
value={this.state.amount},
onChange(this.onAmountChange)
/ >
< SingleDatePicker
date={this.state.createdAt}
onDateChange={this.onDateChange}
focused={this.state.calendarFocused}
onFocusChange={this.onFocusChange}
numberOfMonths={1}
isOutsideRange={() => false}
/ >
< textarea
placeholder="Add a note (optional)"
value={this.state.note}
onChange={this.onNoteChange}
>
< /textarea >
< button >
Add Expense
< /button >
< /form >
< /div >
)
}
}
```
187
test
```
export default const ExpenseForm extends React.Component {
state = {
description: '',
note: '',
amount: '',
createdAt: moment(),
calendarFocused: false
};
onDescriptionChange = (e) => {
// we need access to the argument as this is where the value lives (hence e)
const description = e.target.value;
this.setState(() => ({ description }));
};
onNoteChange = (e) => {
const note = e.target.value;
this.setState(() => ({ note }));
};
onAmountChange = (e) => {
const amount = e.target.value;
if (amount.match(/REGEX/)) {
this.setState(() => ({ amount }));
}
};
onDateChange = (createdAt) => {
this.setState(() => ({ createdAt }));
};
onFocusChage = ({ focused }) => {
this.setState(() => ({ calendarFocsed: fucused }))
};
render() {
return (
```
Add Expense
)
}
}
