Redux

Question 1

Redux can be described in three fundamental principles:

Answer 1

• single source of truth
• state is read only
• changes are made with pure functions

Question 2

Single source of truth

Answer 2

The global state of your application is stored in an object tree within a single store.

Question 3

State is read-only

Answer 3

The only way to change the state is to emit an action, an object describing what happened.

Question 4

Changes are made with pure functions

Answer 4

Reducers are just pure functions that take the previous state and an action, and return the next state

Question 5

What is Redux

Answer 5

Redux is a pattern and library for managing and updating application state, using events called “actions”.

Question 6

Why I need Redux

Answer 6

Redux helps you manage “global” state - state that is needed across many parts of your application.

Question 7

Como instalar redux en un proyecto

Answer 7

yarn add redux react-redux

Question 8

Después de importar redux, creamos un ___ valido porque se necesita obligatorio en el store, aunque este vacío

Answer 8

reducer

Question 9

Luego en el index.js se importa ____ de redux y ___ de react-redux

Answer 9

createStore y Provide

Question 10

Que se le debe pasar a createStore?

Answer 10

const store = createStore( reducers,

// all reducers go here

{}

//initial state );

Question 11

Ahora metemos nuestro en el ____ y le mandamos el store

Answer 11

Provider

Question 12

What is Flux?

Answer 12

architecture that complements React and the concept of Unidirectional Data Flow.

Question 13

Answer 13

Los datos viajan unidirreccional, teniendo un unico camino, y un sitio donde se almacena el estado

Question 14

What is Redux DevTools?

Answer 14

Redux DevTools is a live-editing time travel environment for redux with hot reloading, action replay, and customizable UI.

Question 15

How to add multiple middlewares to Redux?

Answer 15

You can use applyMiddleware where you can pass each piece of middleware as a new argument. So you just need to pass each piece of middleware you’d like. For example, you can add Redux Thunk and logger middlewares as an argument as below,

Question 16

How to set initial state in Redux?

Answer 16

You need to pass initial state as second argument to createStore

Question 17

How to structure Redux top level directories?

Answer 17

1. Components Used for “dumb” React components unaware of Redux 2. Containers Used for “smart” React components connected to Redux 3. Actions Used for all action creators, where file name corresponds to part of the app 4. Reducers Used for all reducers, where file name corresponds to state key 5. Store Used for store initialization This structure works well for small and mid-level size apps.

Question 18

What are Redux selectors and Why to use them?

Answer 18

Selectors are functions that take Redux state as an argument and return some data to pass to the component. For example, to get user details from the state:

Question 19

What are reducers in redux?

Answer 19

The reducer is a pure function that takes the previous state and an action, and returns the next state.

Question 20

Things you should never do inside a reducer:

Answer 20

• Mutate its arguments;
• Perform side effects like API calls and routing transitions;
• Call non-pure functions, e.g. Date.now() or Math.random().

Question 21

What are the features of Redux DevTools?

Answer 21

1. Lets you inspect every state and action payload
2. Lets you go back in time by “cancelling” actions

Question 22

What is Redux Thunk?

Answer 22

Redux Thunk middleware allows you to write action creators that return a function instead of an action.

Question 23

The ___can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met.

Answer 23

thunk

Question 24

What is redux-saga?

Answer 24

redux-saga is a library that aims to make side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache)

Question 25

What is the difference between React context and React redux?

Answer 25

You can use Context in your application directly and is going to be great for passing down data to deeply nested components which what it was designed for. Whereas Redux is much more powerful and provides a large number of features that the Context Api doesn’t provide.

Question 26

How to use connect from react redux?

Answer 26

You need to follow two steps to use your store in your container 1. Use mapStateToProps(): It maps the state variables from your store to the props that you specify 2. Connect the above props to your container: The object returned by the mapStateToProps component is connected to the container. You can import connect from react-redux like

Question 27

What are the differences between redux-saga and redux-thunk?

Answer 27

Both Redux Thunk and Redux Saga take care of dealing with side effects. In most of the scenarios, Thunk allows Promises to deal with them, whereas Saga uses Generators.

Question 28

What is the purpose of the constants in Redux?

Answer 28

Constants allow you to easily find all usages of that specific functionality across the project when you use an IDE. It also prevents you from introducing silly bugs caused by typos – in which case, you will get a ReferenceError immediately.

Question 29

What is the proper way to access Redux store?

Answer 29

The best way to access your store through a component is using the connect() function. Actually creates a new component that wraps around your existing one! This pattern is called Higher-Order Components, and is generally the preferred way of extending a component’s functionality in React. This allows you to map state and action creators to your component, and have them passed in automatically as your store updates. Let’s take an example of FilterLink component using connect.

Question 30

Why are Redux state functions called as reducers?

Answer 30

Reducers always return the accumulation of the state (based on all previous and current actions) not only default values. Therefore, they act as a reducer of state. Each time a redux reducer is called, the state is passed in with the action (state, action). This state is then reduced (or accumulated) based on the action, and then the next state is returned. i.e, You could “reduce” a collection of actions and an initial state (of the store) on which to perform these actions to get the resulting final state.