Redux Basics

Question 1

What is Redux approach on where to store the state of the application?

Answer 1

All state is store in a single state object, also called the state tree.

Question 2

What is the first principle of Redux?

Answer 2

Everything that changes in the application, including data and UI state is stored in a single state object. The state tree.

Question 3

What is the second principle of Redux?

Answer 3

The state tree is immutable. The only way to change it is by dispatching Actions.

Question 4

Who can dispatch Actions?

Answer 4

Anyone that wants to change the app state: network events, user interactions on the UI, timers

Question 5

What are Redux Actions?

Answer 5

They are plain Javascript objects which at a minimum say what change happened in the app. Ex:
{ type: “COMPLETE_TODO”, id: “1”}

Question 6

What is the third principle of Redux?

Answer 6

To describe state mutation you have to write a pure function that takes the previous state of the application, the Action that will mutate it, and return the new state of the application. This is the reducer function.

Question 7

Being pure, what are the constraints of the reducer function?

Answer 7

• cannot create side effects
• must depend only on the parameters given
• must not change the parameters
• must return a new state object

Question 8

What should the reducer function do if it receives undefined as previous state?

Answer 8

It should return the application initial state.

Question 9

Which concept from Redux joins the 3 principles together: state tree, action dispatch and reducer function?

Answer 9

The Store object

Question 10

What are the main methods from the store object?

Answer 10

getState()
dispatch(action)
subscribe(callback)

Question 11

How to integrate react with Redux?

Answer 11

On Redux subscriber you call react render. On react event callbacks you dispatch mutation events to Redux.

Question 12

What is the JS ES5 function that makes an object immutable?

Answer 12

Object.freeze()

Question 13

In Redux, what is the correct way of changing an array part of state?

Answer 13

By creating a copy of the array, using the concat(), slice() or the ... spread operator.
Ex: 
var a = [1,2,3]
return a.slice(1); // [2,3]
return [...a, 4] // [1,2,3,4]
return a.concat(4) // [1,2,3,4]

Question 14

What is a presentational component?

Answer 14

Component that only concerns in how it looks. Every UI action is received via props callbacks from above.

Question 15

What are the pros and cons of presentational components?

Answer 15

Pro
- decouples most components from redux

Con
- requires callbacks to be passed down until leaves via props

Question 16

What is a container component in Redux?

Answer 16

It is a component that calls the store object to get the state or mutate it.
It also subscribes to state changes and force rendering. on the componentDidMount() lifecycle method.

Question 17

Which method do you use to force a component rerendering?

Answer 17

forceUpdate()

Question 18

How do you use react-redux connect() to ease the creation of container components?

Answer 18

const visibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps)(TodoList);

const mapStateToProps = (state) =>  {
    return {
      todos: getVisibleTodos(
        state.todos,
        state.visibilityFilter)
    }
}
const mapDispatchToProps = (dispatch) =>  {
    return {
      onTodoClick: (id) => {
        dispatch({ type: "TOGGLE_TODO", id});
      }      

} }

Question 19

What are Action Generators? Why are they a good practice?

Answer 19

They are functions that create the actions that components can dispatch. They are good because it encapsulates and isolates the logic to generate actions, and it also helps keep the code documented.

Question 20

What library provides React binding to Redux?

Answer 20

react-redux

Question 21

What is react-redux Provider?

Answer 21

It is a component that aids in passing down the app state implicitly via React’s Context API

Question 22

How would you wrap a component with the Provider from react-redux?

Question 23

What does the mapStateToProps function that should be passed to connect() do?

Answer 23

It receives the state object and generates a props object that should be passed to the component connect() will create.

Question 24

What does the mapDispatchToProps function that should be passed to connect() do?

Answer 24

It receives the dispatch function from Redux and returns a map of callbacks that can be used by the component connect() will create.

Question 25

How would you simplify the following arrow function in ES6?

const addTodo = (text) => {
  return {
    type: "ADD_TODO",
    text: text,
  };
};

Answer 25

const addTodo = (text) => ({
    type: "ADD_TODO",
    text,
  });

Question 26

How would you simplify the following arrow function in ES6?

const mapDispatchToProps = (dispatch) => ({
    onTodoClick: (id) => {
      dispatch(toggleTodo(id));
    },
});

Answer 26

const mapDispatchToProps = (dispatch) => ({
    onTodoClick(id) {
      dispatch(toggleTodo(id));
    },
});

Question 27

What does the combineReducer() helper function from Redux do?

Answer 27

Give two or more reducer, it returns a new reducer that is the composition of the given reducers.

Question 28

Write an example of usage of combineReducer()

Answer 28

const rootReducer = combineReducers({ counter, todos })

Question 29

Given the reducer from combineReducer({ counter, todo }), how will the state object store the state return by each reducer? How does redux call each part of that state?

Answer 29

In an object with properties with the name of each reducer:
{ 
  counter: COUNTER_STATE,
  todo: TODO_STATE,
}

Redux call each part of the state the “slice of the state”

Question 30

How can I pass an object called “initialState” when I initialize redux store?

Answer 30

createStore(rootReducer, initialState)