w15 hw for Tuesday - Redux Flashcards
What is Redux?
It’s a JS framework for managing the frontend state of a web application.
It allows us to store info in an organized manner in a web app and to quickly retrieve that info from anywhere in the app.
When is it appropriate to use Redux?
It’s appropriate to use for more sophisticated global state requirements.
Context with React is simpler and requires less work to get up and running so that’s better for more straight forward projects.
What are the 3 main principles of Redux?
- A Single Source of Truth
- State is Read Only
- Changes Are Made with Pure Functions
What is state?
The state of a program is all the info stored by that program at a particular point in time. Redux’s job is to store the state of your app and make it available to the entire app. (Redux is a state manager)
Whats’ the Redux store?
It’s a single JS object with a few methods incl:
getState
dispatch(action)
subscribe(listener)
*Any state you want Redux to handle is held in the store
What’s a Redux action?
It’s a POJO with a type property. Actions have info that can be used to update the store. They can be dispatched (sent to the store, in response to user actions or AJAx requests).
Action creators are used and they return actions. Action creators can take arguments which allow them to customize the data contained in the actions they generate.
What are pure functions?
It’s a function in which its behavior only depends on its arguments and it has no side effects. Meaning:
The function depends only on variables that are passed into it as args. And, it can’t alter the state of the program or any variable existing outside itself. It ONLY takes in args and returns a value.
What’s a reducer?
A function that’s called each time an action is dispatched. It receives an action and the current state as args and returns an updated state.
Reducers are required to be pure functions of the dispatched action and the current state.
What’s middleware?
It’s an optional component of Redux that allows custom responses to dispatched actions.
When actions are dispatched it passes through each middleware that has been added to the state. The most common middleware is to dispatch asynchronous requests to a server.
What are time traveling dev tools?
Redux reducers are pure functions of the dispatched action and the current state. Basically you can look back over previous states over time and one could retroactively cancel an action and recalculate the state as if that action had never been dispatched.
What are thunks?
It’s a general concept in computer science referring to a function who’s primary purpose is to simply call another function. In redux, a thunk action creator returns a function rather than an object. They’re most commonly used to make async API requests.
What’s flux?
A pattern to structure an application. It provides unidirectional data flow.
What’s an action?
It begins the flow of data in Flux. It’s a simple object that at minimum contains a type.
The type indicates the type of change to be performed
What’s a view?
It’s a unit of code that’s responsible for rendering the user interface. A view listens to change events emitted by the store. When changes occur, a view can respond for ex. by updating its internal state and triggering a re-render. Creating an action from the view turns our Flux pattern into a unidirectional loop.
What’s a subscription/subscribe?
broadcasting of state updates
How do you create an action for example with a type of ADD_FRUIT with a payload AND dispatch it at the same time.
store.dispatch(addFruit(‘apple’));
Same as:
const appleAction = addFruit(‘apple’);
store.dispatch(appleAction);
Should I use implicit returns for action creators?
You can use it but it’s better to use just { } because implicit returns make it harder to debug the Redux cycle b/c you can’t use debugging tools in the function like debugger or console.log
Is this an example of the Ducks naming convention: npm-module-or-app/reducer-name/ACTION_TYPE
yes
Is this an example of the Ducks naming convention: groceryApp/fruit/ADD_FRUIT
yes
what does switch do in relation to reducers?
It allows a reducer function to handle multiple action types
What does provider do?
This component binds react and redux together.
ex.
import { Provider } from ‘rect-redux’;
what are action creators?
functions that return our actions
