Build your own Redux

Question 1

What are race conditions?

Answer 1

Race conditions occur when two computer program processes, or threads, attempt to access the same resource at the same time and cause problems in the system.

Question 2

What is the main benefit of Redux in comparison to not using it?

Answer 2

It constrains how and where you can change the state of your app.

Question 3

What is a reducer and what does it do?

Answer 3

A reducer is a function that takes the current state and an action object and returns the new state.

Question 4

What is the dictionary definition of Immutable?

Answer 4

unchanging over time or unable to be changed.

Question 5

What are the two types of equality most worth mentioning in JS?

Answer 5

reference equality
value equality

Question 6

What does this demonstrate ?

var yourCar = {
color: ‘red’,
.. the same as neighboursCar
};

var neighboursCar = {
color: ‘red’,
… the same as yourCar
};

valueEqual(yourCar, neighboursCar); // true;
yourCar === neighboursCar; // false

yourCar.color = ‘blue’;

valueEqual(yourCar, neighboursCar); // false;
yourCar === neighboursCar; // false

Answer 6

Mutations do not change the results of reference equality checks. They change the results of value equality checks.

Question 7

What sentence can help you apply data immutability?

Answer 7

Whenever your object would be mutated, don’t do it. Instead, create a changed copy of it.

Question 8

What is one important mutation that is allowed with Redux?

Answer 8

A variable inside the redux store is allowed to be mutated.

There is a single variable that points to the state object, and we keep changing that variable to point to the next state. That is one important mutation that is allowed in your app, but we’ll control that mutation inside a store.

Question 9

What question can you ask yourself to decide whether to use local state or redux state?

Answer 9

Does this state need to exist after this component is unmounted?

Question 10

What are the three steps to using React’s Context feature?

Answer 10

1. Create a context object outside of any component.
   const ReduxContext = createContext(null);
2. Wrap your component in the context provider.
   const Provider = ({ store, children }) => {
   return (
   <ReduxContext.Provider value={store}>{children}</ReduxContext.Provider>
   );
   };
3. Access the value the context provides using useContext in any components that are children of the Provider.
   const TestApp = () => {
   const store = useContext(ReduxContext);
   console.log(“The redux store”, store.getState());
   return <h1>This app is sick!</h1>;
   };

Question 11

What is a higher order component in React?

Answer 11

a higher-order component is a function that takes a component and returns a new component.

Question 12

Why is a Redux reducer called a reducer?

Answer 12

It is called a reducer because it works like a reducer callback. A reducer callback that is building a final object will return a new object on every iteration, at the end of the reduce we have a final object. This is what a Redux reducer does it returns a new object(state). After multiple dispatches you will have run multiple reducers resulting in the current state.