W7D1

Question 1

What is lodash?

Answer 1

It is JS utility library and npm-package that provides many useful helper functions for solving common problems.

Question 2

What is lodash merge?

Answer 2

It is a quick and effective way to deep dup an object

Question 3

What is lodash union?

Answer 3

It creates an array of unique values in insertion order from 2 given arrays

Question 4

What is flux?

Answer 4

Flux is a front-end application pattern developed to used with React. It provides a unidirectional data flow, which affords more predictability.

Question 5

What is an Action

Answer 5

It is a simple object that at minimum maintains a ‘type’. It begins a flows of data in Flux.

Question 6

What is an Action type?

Answer 6

It indicates the type of change to be performed on the application’s state.

Question 7

Dispatcher

Answer 7

is a mechanism for distributing actions to a Flux application store and a pseudo bank/library of actions.

Question 8

Store

Answer 8

It represents the entire state of the application. Also responsible for updating the state of the application whenever it receives an action.

Question 9

View

Answer 9

It is responsible for rendering the user interface and it can create actions.

Question 10

What is the flow of flux?

Answer 10

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.

Question 11

What is redux?

Answer 11

A node package that facilitates a particular implementation of Flux.

Question 12

What are 3 principles of Redux?

Answer 12

1. The entire state of App is stored in single JS object, which is stored in a single store.
2. The only way to change the state of the applicatin is to dispatch an action.
3. Pure Functions aka Reducers are the only ones to change state.

Question 13

What does a reducer receive? What does it return?

Answer 13

Receives Current State and an action and return the new state

Question 14

What is the reducer first initialized with?

Answer 14

An undefined state

Question 15

What is Reducer Composition?

Answer 15

It is the concept of splitting up reducers into multiple reducers handling separate, independent slices of the global state.

Question 16

What is combineReducers() used for?

Answer 16

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.

Question 17

What does combineReducers take as an argument?

Answer 17

It takes an argument of an object with keys mapped to reducers that handle a single portion of state.

Question 18

How do we create a store?

Answer 18

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)

Question 19

How do you define an action creator?

Answer 19

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"
};

Question 20

What is prop-threading?

Answer 20

It is an anti-pattern of nesting components and a deeply nested component does not have access to the store.

Question 21

What is Provider?

Answer 21

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.

Question 22

How do you implement Provider for the ‘APP’?

Answer 22

// root.jsx
import React from 'react';
import { Provider } from 'react-redux';
import App from './app.jsx';

const Root = ({ store }) => (

);

export default Root;

Question 23

Where is the store created?

Answer 23

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.

Question 24

What is the connect()?

Answer 24

connect gives components access to the store context, which converts the store context into a store prop

Question 25

What are the two arguments connect needs?

Answer 25

mapStateToProps, mapDispatchToProps

Question 26

mapStateToProps

Answer 26

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.

Question 27

mapDispatchToProps

Answer 27

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.

Question 28

What is the purpose of a presentational component vs a container?

Answer 28

Presentational Components are responsible for how things look, and containers are responsible fore how things work?

Question 29

How do containers work?

Answer 29

They connect the store to the components it wraps around.

Question 30

What are selectors?

Answer 30

Selectors are functions that are passed the app’s state and return information from the application state in a specified form.

Question 31

What do you use selectors for?

Answer 31

We use them to format different slices of state.