Udemy - React with Redux Flashcards
What is a connected component?
A React component that’s connected to the Redux store.
What happens when a React component is connected to the Redux store?
The components are going to be able to fetch data off the redux store so they can render something to the screen and when that data that they fetch changes, they’re automatically going to get rerendered so we always have the interface up to date with the latest changes to the redux store. We’ll also be able to dispatch actions directly from our React components. If we have a React component with a from, someone can fill out that data, submit the form and the React component can dispatch he necessary action to change the stores data.
How would you export this code as a function?
const store = createStore(
combineReducers({
expenses: expensesReducer,
filters: filtersReducer
})
);
export default () => {
const store = createStore(
combineReducers({
expenses: expensesReducer,
filters: filtersReducer
})
);
return store;
};Why would you export the createStore() function in another function?
When we import the function (the default function (from configureStore.js)), we just call it, we get the store back and we can then use it.
How would you use this function?
export default () => {
const store = createStore(
combineReducers({
expenses: expensesReducer,
filters: filtersReducer
})
);
return store;
};
import configureStore from ‘./store/configureStore’;
const store = configureStore();
What does store give us access to?
import configureStore from ‘./store/configureStore’;
const store = configureStore();
All the things we had before:
store. dispatch()
store. getState()
store. subscribe()
Give a simple example of using store:
import configureStore from ‘./store/configureStore’;
const store = configureStore();
console.log(store.getState());
How would you add an expense?
store.dispatch(addExpense({ description: ‘Water bill’ }));
How would you set the text filter?
store.dispatch(setTextFilter(‘bill’));
How would you get the visible expenses?
const state = store.getState(); const visibleExpenses = getVisibleExpenses(state.expenses, state.filters); console.log(visibleExpenses);
What is React Redux?
A library that allows us to connect our redux stores to our react components. It makes heavy use of a pattern known as higher order components.
What is a Higher Order Component (HOC)?
A component (HOC) that renders another component (regular component).
NOTE: The HOC may render several other components.
How would you create a HOC that renders < Info / >?
const Info = (props) => (
< div >
< h1 >Info< /h1 >
< p >The info is: {props.info}.< /p >
< /div >
);
ReactDOM.render(< Info info=”details” / >, docuent.getElementById(‘app’));
NOTE: We’re implicitly returning some JSX.
NOTE: The HOC is a stateless functional component that implicitly returns some JSX.
const withAdminWarning = (WrappedComponent) => {
return (props) => (
< div >
< p >This is private info< /p >
< /WrappedComponent / >
< /div >
);
};
const AdminInfo = withAdminWarning(info);
ReactDOM.render(< AdminInfo info=”details” / >, docuent.getElementById(‘app’));
What will HOC allow?
To reuse code.
Able to perform render hijacking.
Add a little prop manipulation.
Abstract state.
What are the steps of creating a HOC?
- Create a (regular) function (not a react component).
- This function gets called with another component that we want to wrap.
- When you call this (HOC) function, what you get back is an alternative version of the component you pass in (it’s going to be the HOC).
- Calling the argument of the (step 1) function, WrappedComponent is a convention. NOTE: it is a component so we do want to start with an upper case first letter.
- Inside this function is where we return a new component. NOTE: The component that is created here is the HOC.
see: The Higher Order Component
What’s the problem with this code?
const withAdminWarning = (WrappedComponent) => {
return (props) => (
< div >
< p >This is private info< /p >
< /WrappedComponent / >
< /div >
);
};
const AdminInfo = withAdminWarning(info);
ReactDOM.render(< AdminInfo info=”details” / >, docuent.getElementById(‘app’));
The info component is broken. It’s not getting the props that are passed in.
How could you fix this code?
const withAdminWarning = (WrappedComponent) => {
return (props) => (
< div >
< p >This is private info< /p >
< /WrappedComponent / >
< /div >
);
};
const AdminInfo = withAdminWarning(info);
ReactDOM.render(< AdminInfo info=”details” / >, docuent.getElementById(‘app’));
With the spread operator. When we’re instantiating a component inside of JSX, we can open and close a set of curly braces to create a JavaScript expression. From here, we can spread out any object we like. Here, we spread out props. This has the effect of taking every key value pair on that object and passing them down as props.
const withAdminWarning = (WrappedComponent) => {
return (props) => (
< div >
< p >This is private info< /p >
< /WrappedComponent {...props}/ >
< /div >
);
};
const AdminInfo = withAdminWarning(info);
ReactDOM.render(< AdminInfo info=”details” / >, docuent.getElementById(‘app’));
How could you provide whether or not you should show the AdminInfo message?
const withAdminWarning = (WrappedComponent) => {
return (props) => (
< div >
< p >This is private info< /p >
< /WrappedComponent {...props}/ >
< /div >
);
};
const AdminInfo = withAdminWarning(info);
ReactDOM.render(< AdminInfo info=”details” / >, docuent.getElementById(‘app’));
By passing a special prop into the HOC aswell.
NOTE: We use some
const withAdminWarning = (WrappedComponent) => {
return (props) => (
< div >
{ props.isAdmin AND < p >This is private info< /p > }
< /WrappedComponent {...props}/ >
< /div >
);
};
const AdminInfo = withAdminWarning(info);
ReactDOM.render(< AdminInfo isAdmin={true} info=”details” / >, docuent.getElementById(‘app’));
What are we going to be doing a lot with the React Redux library?
We’ll be given a function. We’ll pass out function inside of them and the end result will be a new component that we’re going to be using. This component will have access to the redux store.
How would you create a function that tests whether someone is logged in or not, using this code?
ReactDOM.render(< AuthInfo isAuthenticated={false} info=”details” / >, docuent.getElementById(‘app’));
NOTE: RequireAuthentication() isn’t a HOC, it’s just a regular function that returns the HOC.
NOTE: For our purposes, we return a stateless functional component.
NOTE: We implicitly return some JSX.
const requireAuthentication = (WrappedComponent) => {
return (props) => (
< div >
{props.isAuthenticated ? (
< WrappedComponent {...props} / >
) : (
< p >Please log in< /p >
)}
< /div >
);
};
How can you install the React Redux library?
yarn add react-redux@x
How many times are we going to use the component?
Once.
How many times are we going to use the < Provider / > component?
Once.
Where are we going to use the < Provider / > component?
At the root of our application.
What will we use connect on?
Every component that needs to connect to the redux store.
How do we import the Provider component?
NOTE: Provider and connect are named exports.
import { Provider } from ‘./react-redux’;
How do we use the provider component?
ReactDOM.render(< AppRouter / >, document.getElementById(‘app’));
const jsx = (
< Provider store={store} >
< AppRouter / >
< /Provider >
);
ReactDOM.render(jsx, document.getElementById(‘app’));
What does Provider allow us to do?
To provide the store to all of the components that make up our application.
Why is Provider useful?
Because we don’t have to manually pass the store around. Instead, individual components that want to access the store can just access it.
What prop has to be passed into Provider?
The store that we’re trying to share with the rest of the application.
Can we use connect without having Provider set up?
No.
How would we get the expenses list rendered?
const ExpenseDashboardPage = () => (
< div >
This is from my Dashboard component!
< /div >
);
const ExpenseList = () => (
< div >
< h1 >Expense List< /h1 >
< /div >
);
NOTE: This is a stateless functional component.
const ExpenseList = () => (
< div >
< h1 >Expense List< /h1 >
< /div >
);
const ExpenseDashboardPage = () => (
< div >
< ExpenseList / >
< /div >
);
What does connect do?
Connect your component to the redux store.
How would you import connect?
import { connect } from ‘react-redux’;
How would you use connect in this code?
const ExpenseList = () => (
< div >
< h1 >Expense List< /h1 >
< /div >
);
const ExpenseDashboardPage = () => (
< div >
< ExpenseList / >
< /div >
);
Firstly, you’ll create a new const for the HOC.
const ConnectedExpenseList = connect((state) => {
return {
name: 'Chris'
}
})(ExpenseList);
const ExpenseList = (props) => (
< div >
< h1 >Expense List< /h1 >
{props.name}
< /div >
);
Why is calling connect() slightly different than usual?
We get something back which is not the HOC. It’s actually the function, which means we need to call that with the component.
What would you provide in the first argument of connect()()
Information about what we want to connect. We have a lot of information on the store and the component doesn’t always/usually need all of it, just a subset. So you define a function.
What does the function you pass in as the first argument of connect()() determine?
What information from the store we want our component to be able to access.
What function would you pass into the first argument of connect()()
connect((state) => {
return {
name: 'Chris'
}
})(ExpenseList);What gets passed into the function you pass into the first argument of connect()()
the stores state.
How does the connect()() functions body work?
We return and object. On this object we can put any key value pairs we like. Usually, they’re things from the state but you could pass in name: ‘Chris’. Now the ConnectExpenseList component is going to have access to the name prop. This means in ExpenseList, you can set up props and use the value.
How would you make this useful?
const ConnectedExpenseList = connect((state) => {
return {
name: 'Chris'
}
})(ExpenseList);
const ExpenseList = (props) => (
< div >
< h1 >Expense List< /h1 >
{props.name}
< /div >
);
By reading off of the state.
const ConnectedExpenseList = connect((state) => {
return {
expenses: state.expenses
}
})(ExpenseList);
const ExpenseList = (props) => (
< div >
< h1 >Expense List< /h1 >
{props.expenses.length}
< /div >
);
What is a more common pattern than creating a separate variable and then exporting it by default like so?
const ConnectedExpenseList = connect((state) => {
return {
expenses: state.expenses
}
})(ExpenseList);
export default ConnectedExpenseList;
export default connect((state) => {
return {
expenses: state.expenses
}
})(ExpenseList);What is a common practice you could take with this code?
export default connect((state) => {
return {
expenses: state.expenses
}
})(ExpenseList);
Take the function and break it out into its own variable.
const mapStateToProps = (state) => {
return {
expenses: state.expenses
}
};
export default connect(mapStateToProps)(ExpenseList);
What would you do if you also wanted to access the filters?
const mapStateToProps = (state) => {
return {
expenses: state.expenses
}
};
const ExpenseList = (props) => (
< div >
< h1 >Expense List< /h1 >
{props.expenses.length}
< /div >
);
const mapStateToProps = (state) => {
return {
expenses: state.expenses,
filters: state.filters
}
};
const ExpenseList = (props) => (
< div >
< h1 >Expense List< /h1 >
{props.filters.text}
{props.expenses.length}
< /div >
);
What is noteworthy about this code?
const mapStateToProps = (state) => {
return {
expenses: state.expenses,
filters: state.filters
}
};
As the store changes, the function is automatically going to get rerun.
What are the arguments you pass into setTimeout()
The first is a function and the second is the amount of time you want to wait in milliseconds.
Show a simple example of using setTimeout()
setTimeout(() => {
store.dispatch(setTextFilter(‘rent’));
}, 3000);
What is important to note in regards to when you connect a component to the redux store?
That it’s reactive. This means as the store changes, the component is going to get rerendered with those new values.
Why is it a good thing that when you connect a component to the redux store, it’s reactive?
It allows us to create very simple components.
const ExpenseList = (props) => (
< div >
< h1 >Expense List< /h1 >
{props.filters.text}
{props.expenses.length}
< /div >
);
For example, this component doesn’t need to worry about using store.subscribe() or store.getState(). It doesn’t have to use any component state to manage that data, instead all of it is done for us by React Redux. All we have to do is define how we want to render things. Therefore, it’s a simple presentational component.
What is the goal with presentational components?
To get as many of the components into presentational component patterns as possible.
SEE
Connecting Store and Component with React Redux.
How would you do something meaningful with the array of expenses in this code?
const ExpenseList = (props) => (
< div >
< h1 >Expense List< /h1 >
{props.expenses.length}
< /div >
);
Use map to iterate over the array and render a new instance of of an Expense List Item Component, for each one.
How would you create a stateless functional component that renders the description, amount and the created at value and update this code to use it?
const ExpenseList = (props) => (
< div >
< h1 >Expense List< /h1 >
{props.expenses.length}
< /div >
);
NOTE: This implicitly returns some JSX.
NOTE: The props object is destructured.
NOTE: You must import React as you are using JSX.
NOTE: We use the spread operator on the < ExpenseListItem / > instance.
NOTE: The key prop is needed.
const ExpenseListItem = ({ description, amount, createdAt }) => (
< div >
< h3 >{description}< /h3 >
< p >{amount} - {createdAt}< /p >
< /div >
);
const ExpenseList = (props) => (
< div >
< h1 >Expense List< /h1 >
{props.expenses.map((expense) => {
return < ExpenseListItem key={expense.id} {...expense}/ >
})}
< /div >
);
What does map() allow?
To take in something and get back an array of something else. In our case we’re getting in an array of objects and trying to return an array of instances of ExpenseListItem.
What do you pass into map()
An updater function.
