Redux Flashcards
(30 cards)
Redux can be described in three fundamental principles:
- single source of truth
- state is read only
- changes are made with pure functions
Single source of truth
The global state of your application is stored in an object tree within a single store.
State is read-only
The only way to change the state is to emit an action, an object describing what happened.
Changes are made with pure functions
Reducers are just pure functions that take the previous state and an action, and return the next state
What is Redux
Redux is a pattern and library for managing and updating application state, using events called “actions”.
Why I need Redux
Redux helps you manage “global” state - state that is needed across many parts of your application.
Como instalar redux en un proyecto
yarn add redux react-redux
Después de importar redux, creamos un ___ valido porque se necesita obligatorio en el store, aunque este vacío
reducer

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

Que se le debe pasar a createStore?
const store = createStore( reducers,
// all reducers go here
{}
//initial state );
Ahora metemos nuestro en el ____ y le mandamos el store
Provider

What is Flux?
architecture that complements React and the concept of Unidirectional Data Flow.

Los datos viajan unidirreccional, teniendo un unico camino, y un sitio donde se almacena el estado
What is Redux DevTools?
Redux DevTools is a live-editing time travel environment for redux with hot reloading, action replay, and customizable UI.
How to add multiple middlewares to Redux?
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,

How to set initial state in Redux?
You need to pass initial state as second argument to createStore

How to structure Redux top level directories?
- 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.
What are Redux selectors and Why to use them?
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:

What are reducers in redux?
The reducer is a pure function that takes the previous state and an action, and returns the next state.

Things you should never do inside a reducer:
- Mutate its arguments;
- Perform side effects like API calls and routing transitions;
- Call non-pure functions, e.g. Date.now() or Math.random().
What are the features of Redux DevTools?
- Lets you inspect every state and action payload
- Lets you go back in time by “cancelling” actions
What is Redux Thunk?
Redux Thunk middleware allows you to write action creators that return a function instead of an action.
The ___can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met.
thunk
What is redux-saga?
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)


