W7D1 Flashcards
What is lodash?
It is JS utility library and npm-package that provides many useful helper functions for solving common problems.
What is lodash merge?
It is a quick and effective way to deep dup an object
What is lodash union?
It creates an array of unique values in insertion order from 2 given arrays
What is flux?
Flux is a front-end application pattern developed to used with React. It provides a unidirectional data flow, which affords more predictability.
What is an Action
It is a simple object that at minimum maintains a ‘type’. It begins a flows of data in Flux.
What is an Action type?
It indicates the type of change to be performed on the application’s state.
Dispatcher
is a mechanism for distributing actions to a Flux application store and a pseudo bank/library of actions.
Store
It represents the entire state of the application. Also responsible for updating the state of the application whenever it receives an action.
View
It is responsible for rendering the user interface and it can create actions.
What is the flow of flux?
Store will check the dispatcher for any actions and change the state. It will than pass the changed state to the view. If the view has an action, it will pass that action to the dispatcher and the store will check the dispatcher again.
What is redux?
A node package that facilitates a particular implementation of Flux.
What are 3 principles of Redux?
- The entire state of App is stored in single JS object, which is stored in a single store.
- The only way to change the state of the applicatin is to dispatch an action.
- Pure Functions aka Reducers are the only ones to change state.
What does a reducer receive? What does it return?
Receives Current State and an action and return the new state
What is the reducer first initialized with?
An undefined state
What is Reducer Composition?
It is the concept of splitting up reducers into multiple reducers handling separate, independent slices of the global state.
What is combineReducers() used for?
When using Reducer Composition, it is important use combineReducers. It combines multiple Reducers and returns a single reducer. It is important to do this because createStore only takes one reducer as an argument.
What does combineReducers take as an argument?
It takes an argument of an object with keys mapped to reducers that handle a single portion of state.
How do we create a store?
We import the createStore method from redux and a root reducer file. We declare a const of store and define it with the function createStore(rootReducer).
ex:
import {createStore} from ‘redux’;
import rootReducer form ‘./reducers/root_reducer/’
const store = createStore(rootReducer)
How do you define an action creator?
You create a const of an action and assign it an object. It must hold the key of ‘type’ with a value of const and any following payloads. And you want to export both.
ex:
export const ADD_FRUIT = "ADD_FRUIT";
export const addOrange = {
type: ADD_FRUIT,
fruit: "orange"
};
What is prop-threading?
It is an anti-pattern of nesting components and a deeply nested component does not have access to the store.
What is Provider?
Provider is a component imported from react-redux, which will wrap an entire App inside of it and will give that entire App’s components, even its deeply nested components, access to the store without the use of prop-threading.
How do you implement Provider for the ‘APP’?
// root.jsx
import React from 'react';
import { Provider } from 'react-redux';
import App from './app.jsx';
const Root = ({ store }) => (
);
export default Root;
Where is the store created?
The store is not created in store.js. store.js just holds the function to create a store. The store is created in the entry file.
What is the connect()?
connect gives components access to the store context, which converts the store context into a store prop
What are the two arguments connect needs?
mapStateToProps, mapDispatchToProps
mapStateToProps
It tells connect() how to map the state into your component’s props. It takes the store’s state and returns an object containing the relevant props for your component.
mapDispatchToProps
It is a a function that accepts the store’s dispatch method and returns an object containing functions that can be called to dispatch actions to the store, which are then passed as props to your component.
What is the purpose of a presentational component vs a container?
Presentational Components are responsible for how things look, and containers are responsible fore how things work?
How do containers work?
They connect the store to the components it wraps around.
What are selectors?
Selectors are functions that are passed the app’s state and return information from the application state in a specified form.
What do you use selectors for?
We use them to format different slices of state.
