W7D2

Question 1

What are higher order functions?

Answer 1

They can define and return function or accept callbacks as arguments. They can also do both.

Question 2

What are callbacks?

Answer 2

They are functions that are passed as arguments to higher order functions

Question 3

What are Closures?

Answer 3

Closures are functions that use variables that are defined outside of its scope.

Question 4

What are free variables?

Answer 4

Free Variables are variables defined outside of its scope.

Question 5

What type of scope is closures?

Answer 5

Closures use lexical scoping

Question 6

What are composing functions?

Answer 6

Composing Functions use currying. The outermost function receives an initial value, but has a nested composing function. This composing function take 2 functions that do something to the initial value that was received.

Question 7

Wrote a composing function?

Answer 7

const compose = function (f, g) {
  return function (x) {
    return f(g(x));
  };
};

Question 8

What is middleware?

Answer 8

Middleware is software that intercepts a process either to redirect it or generate some side effect.

Question 9

How is middleware initiated?

Answer 9

When a dispatch is made.

Question 10

How does middleware work?

Answer 10

Middleware works when a dispatch is made, the middleware intercepts the action, before it reaches the reducer. When the action is intercepted, middleware will test if the action is a function. If so, it will invoke the action, otherwise it will pass the action along.

Question 11

What are the 4 things middleware can do?

Answer 11

1. It can resolve the action
2. It can pass along the action if it is not a function
3. Generate a side effect
4. send another dispatch

Question 12

What are the 3 arguments that createStore takes? Say it in the correct order

Answer 12

1. reducer
2. preloadedState
3. enhancer

Question 13

What is the logger middleware?

Answer 13

Logger prints the store’s state before and after the action is processed.

Question 14

What is a function signature?

Answer 14

A function signature is the set of inputs and outputs of a function.

Question 15

What is the function signature of middleware? And why is important for middleware conform to a particular function signature?

Answer 15

Every middleware must receive the ‘store’ as an argument and returns a function that takes the ‘next link’ in the middleware chain as an argument. The nested function with the argument of the next link returns another function that receives the ‘action’ as an arguments. In the final function, it will either trigger any side effects before returning the next(action).

Question 16

Write the middleware function signature. 
const middleware = ...

Answer 16

const middleware = store => next => action => {
  const result  = next(action);
  return result
};

Question 17

What are all the things that the logger middleware can do?

Answer 17

It can receive the store as its only argument.
It can return a function that receives the next middleware.
It also return a function receiving the action.

Question 18

Write the logger middleware’s function signature.

Answer 18

const logger = state => next => action => {

console. log(‘Action received: ‘, action);
console. log(‘State pre-dispatch:’, store.getState());

let result = next(action);

console.log(‘State post-dispatch:’ ,store.getState());

return result;

}

Question 19

What do want the source to every change to our app state be?

Answer 19

Action creator

Question 20

What is the purpose of thunk middleware?

Answer 20

Thunk middleware allows you to write action creators that return a function instead of an action. Thunks can be used to delay the dispatch of an action or to dispatch only if a certain condition is met.

Question 21

Write thunk function source code

Answer 21

function createThunkMiddleware(extraArg) {
  return({dispatch, getState}) => next => action{
    if(typeof(action === 'function') {
      return action(dispatch, getState, extraArg);
    }

   return next(action)
  }
}

const thunk = createThinkMiddleware();
thunk.withExtraArg = createThunMiddleware;

export default thunk;

Question 22

What part of the store does thunk middleware receive?

Answer 22

dispatch and getState

Question 23

Write thunk function

Answer 23

const thunk = ({ dispatch, getState }) => next => action => {
  if (typeof action === 'function') {
    return action(dispatch, getState);
  }
  return next(action);
};

export default thunk;

Question 24

Why do pass getState function to thunk?

Answer 24

In case our async action creators need access to our application state.

Question 25

What does the reducer doe if the state changes?

Answer 25

It must return a new state object without mutating the original state.

Question 26

How do you prevent the mutation of the state?

Answer 26

By using Object.freeze

Question 27

What does Object.freeze do?

Answer 27

It prevents new properties from being added to an object and also prevents properties currently on an object from being altered or deleted.

Question 28

What is the weakness to Object.freeze?

Answer 28

It is not a deep freeze. Object.freeze can still mutate nested objects.

Question 29

What is happening in the code snippets A and B?

Code A:
people.farmers = { name: ‘Young MacDonald’ };
people //=> { farmers: {name: ‘Old MacDonald’ } }

Code B:
people.farmers.name = ‘Young MacDonald’;
people //=> { farmers: {name: ‘Young MacDonald’ } }

Answer 29

In Code A, farmers is not a nested object, thus Object.freeze will prevent mutation on it. However in Code B, the name key in farmers is a deeply nested object, thus Object.freeze cannot prevent it from being mutated.

Question 30

What is a namespace?

Answer 30

A namespace is just a subset of controllers that live under a specific URL.

Question 31

What is happening below?

namespace :api do
resources :cats, only: [:index]
end

Answer 31

In the controllers folder in our rails project, we have a nested directory called api. In api, we now put a subset of controllers in the api directory. In the api directory the cats controller is not a part of the subset of the api’s controllers.

In the code, we are telling the router to look for the cats controller in the api directory.