w7d1 - redux Flashcards
Three principles of Redux
Single Source of Truth
State is Read-Only
Only Pure Functions Change State
What does Single Source of Truth mean?
The entire state of the application is stored in a single JS object in a single store, commonly referred to as a ‘state tree’.
What does State is Read-Only mean?
The only way to change the state is to dispatch an action. This principle ensures that our Redux loop is never short-circuited and change of state remains single-threaded.
What is the Redux loop?
Action -> Dispatcher -> Store -> View
Optionally a View may create an Action that loops back to the Dispatcher, Store and View in that order.
What does the Store do?
It holds the global state of an application.
How do you create a Store in redux?
createStore(reducer, [preLoadedState], [enhancer])
What does the reducer do?
The reducer is a reducing function that receives the app’s current state and incoming actions, determines how to update the store’s state, and returns the next state
What does the preloadedState argument for createStore do?
It’s an optional object representing any application state that existed before the state was created.
What does the preLoadedState argument for createStore do?
It’s an optional function that adds extra functionality to the store
How do you get the current store’s state?
store.getState( )
How do you pass an action into the store’s reducer?
dispatch( action )
How do you register a callback to be triggered whenever the store updates?
subscribe( callback )
What’s unique about callbacks registered to the store?
Once they’re called, they’re unsubscribed, and so they will only be called once.
What exactly is a redux action?
a POJO with a mandatory ‘type’ key and optional payload keys that contain new information to be merged into the store.
How do you set up a basic redux action containing an orange with type ADD_FRUIT?
const addOrange = {
type: "ADD_FRUIT",
fruit: "orange"
};Name of the anti-pattern that involves passing references down to deeply-nested components.
Why is it bad?
prop-threading
Tedious and error-prone.
How is prop-threading corrected?
By setting up a Provider component that exists solely to provide global-ish access to the store to all child components.
What does connect( ) do?
It’s a higher-order function that ____
What does Object.assign do?
It merges (via shallow-copy) an arbitrary number of args, to the left.
What’s the big-O of a shallow-copy?
O(1). It effectively passes a reference.
When do you invoke a reducer by hand?
Never. They are always invoked by the dispatcher.
What does mapStateToProps do?
It literally maps some keys of state into props to be passed to a Component. Specifically, the props that the Component actually cares about.
How do you indicate to a Component to access state from a Provider?
<Provider>
<ComponenentThatCares></ComponenentThatCares>
</Provider>
How does <form onsubmit="..."> differ from using a button to submit the form?
With onsubmit, pressing enter will submit the form.
Why use onChange on an input in a form?
To continuously update the virtual DOM
What does combineReducers do? Take as args?
It will iterate over all reducers passed in, combine the resulting states, and return a new state.
Do you need to bind a method that does not make use of ‘this’ ?
Nope.
What are the arguments passed in to connect( ) ?
connect( mapStatesToProps, mapDispatchToProps )
What does the mapStatesToPro argument of connect( ) do? What is it?
A function that tells connect( ) how to map the state into your component’s props.
It takes these arguments:
mapStateToProps( state, [ownProps])
