Udemy - Redux Flashcards
What is Redux?
A library that makes it possible to manage more complex state.
What is the Redux store?
An object.
Give an example of a Redux store:
{
expenses: [{
_id: 'abc',
description: 'rent',
amount: 109500
}]
}What are the shortcomings of using component state?
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.
What two things can each component define in Redux?
What data it needs.
What data it needs to be able to change.
How do you install Redux?
yarn add redux@x
What’s the first thing you do in Redux?
Import the createStore function.
How would you import the store function from Redux?
import { createStore } from ‘redux’;
How many times would you call createStore?
Once.
How would you create a store?
const store = createStore((state = { count: 0 }) => {
return state;
});Can you call createStore without any arguments?
No.
What is the first argument createStore expects?
A function (state).
What does state mean in this code?
const store = createStore((state) => {
return state;
});
The current state.
What does state = { count: 0 } mean in this code?
const store = createStore((state = { count: 0 }) => {
return state;
});
Because we don’t have a constructor function where we set up the default we set it up here.
What does the store.getState() method do?
Returns the current state object.
How could you view the state object in this code in the console?
const store = createStore((state = { count: 0 }) => {
return state;
});
console.log(store.getState());
What do actions allow us to do?
Change the Redux store.
What is an action?
An object that gets sent to the store. This object describes the type of action we’d like to take.
How do you create an action?
Define an object, with a type property.
What is the single property you have to define on an action?
The type property.
What Redux convention does the action objects type property value use?
Written in all upper case with an underscore to separate multiple words.
What do you do after you define a type property on an action object?
Send it to the store.
How would you send an action to the store.
By calling a method on store called store.dispatch();
What does dispatch allow us to do?
Send off an action object.
How would you use store.dispatch() with an action.
Put the action object in the dispatch method.
Show an example of using store.dispatch() with an action.
store.dispatch({
type: ‘INCREMENT’
});
What happens to the store when using this code?
store.dispatch({
type: ‘INCREMENT’
});
The createStore function runs again.
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;
});
How does the store get access to the action object?
It gets passed in as the second argument to createStore function.
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;
});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.
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.
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.
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;
}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.
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;
}Does store.getState() rerun when the store changes?
No.
Why do we need to be able to know when the store changes?
So we can re-render our application.
How can you watch for changes to the Redux store state?
You can use store.subscribe()
What is store.subscribe()
A function.
What do you pass to store.subscribe()
A single function.
What’s not worthy about the function you pass to store.subscribe()
It get called every time the store changes.
Show a simple example of using store.subscribe()
store.subscribe(() => {
console.log(store.getState());
});
What does this code do?
store.subscribe(() => {
console.log(store.getState());
});
Logging the state to the console every time it changes.
How would you stop subscribing to the store?
Call the return value of subscribe (a function).
What is something you would have to do to store.subscribe() before you can call its return value?
Save it as a variable.
Show a simple example of how you would unsubscribe from the store:
const unsubscribe = store.subscribe(() => {
console.log(store.getState());
});
unsubscribe();
What will happen if you have an undefined type property in an action?
It will throw an error.
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.
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;
}How can you use action that have require types?
By using them directly as opposed to checking if they exist.
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;
}What does ES6 Object Destructuring allow us to do?
Easily work with arrays and objects.
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}.);
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}.);
};
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.
How would you rename ‘temp’ in this destructued object?
const { town, temp } = person.location;
const { town, temp: temperature } = person.location;
How would you set up a default value in this destructued object?
const { name, age } = person;
const { name = ‘Anonymous’, age } = person;
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;
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.
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}.);
How would you set a default to this destructured array?
const [, city, country] = address;
const [, city, country = ‘UK’] = address;
What is an action generator?
A function that returns an action object.
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.
What’s the first step in creating an action generator?
Creating a function.
const incrementCount = () => {
};
What’s the goal of an action generator.
To be a simple function that takes input in, and returns the new action object.
Show an action generator returning a new action object:
const incrementCount = () => {
return {
type: 'INCREMENT'
};
};How could you improve this code?
const incrementCount = () => {
return {
type: 'INCREMENT'
};
};
By implicitly returning the object.
const incrementCount = () => ({
type: 'INCREMENT'
});
What do you need to do when implicitly returning objects?
Wrap the object in parentheses.
How would you call this function?
const incrementCount = () => ({
type: 'INCREMENT'
});
store.dispatch(incrementCount());
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.
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: ...
});How would you dispatch an object with an incrementBy argument in this code?
store.dispatch(incrementCount());
store.dispatch(incrementCount({ incrementBy: 5 }));
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.
