W7D2 Flashcards
What are higher order functions?
They can define and return function or accept callbacks as arguments. They can also do both.
What are callbacks?
They are functions that are passed as arguments to higher order functions
What are Closures?
Closures are functions that use variables that are defined outside of its scope.
What are free variables?
Free Variables are variables defined outside of its scope.
What type of scope is closures?
Closures use lexical scoping
What are composing functions?
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.
Wrote a composing function?
const compose = function (f, g) {
return function (x) {
return f(g(x));
};
};What is middleware?
Middleware is software that intercepts a process either to redirect it or generate some side effect.
How is middleware initiated?
When a dispatch is made.
How does middleware work?
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.
What are the 4 things middleware can do?
- It can resolve the action
- It can pass along the action if it is not a function
- Generate a side effect
- send another dispatch
What are the 3 arguments that createStore takes? Say it in the correct order
- reducer
- preloadedState
- enhancer
What is the logger middleware?
Logger prints the store’s state before and after the action is processed.
What is a function signature?
A function signature is the set of inputs and outputs of a function.
What is the function signature of middleware? And why is important for middleware conform to a particular function signature?
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).
Write the middleware function signature. const middleware = ...
const middleware = store => next => action => {
const result = next(action);
return result
};What are all the things that the logger middleware can do?
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.
Write the logger middleware’s function signature.
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;
}
What do want the source to every change to our app state be?
Action creator
What is the purpose of thunk middleware?
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.
Write thunk function source code
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;
What part of the store does thunk middleware receive?
dispatch and getState
Write thunk function
const thunk = ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState);
}
return next(action);
};
export default thunk;
Why do pass getState function to thunk?
In case our async action creators need access to our application state.
What does the reducer doe if the state changes?
It must return a new state object without mutating the original state.
How do you prevent the mutation of the state?
By using Object.freeze
What does Object.freeze do?
It prevents new properties from being added to an object and also prevents properties currently on an object from being altered or deleted.
What is the weakness to Object.freeze?
It is not a deep freeze. Object.freeze can still mutate nested objects.
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’ } }
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.
What is a namespace?
A namespace is just a subset of controllers that live under a specific URL.
What is happening below?
namespace :api do
resources :cats, only: [:index]
end
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.
