Redux Flashcards
What does redux allow you to do?
It lets your React components read data from a Redux store, and dispatch actions to the store to update state.
How do you install react redux?
npm install react-redux
What packages do you need to install to use react toolkit?
I think you need all of these check this…
npm install redux
npm install react-redux
npm install @reduxjs/toolkit
- What does the Provider component do?
- what prop does it require?
- Where do you place the component?
- The Provider component makes the Redux store available to the rest of your app.
- It requires the store prop provided with the redux store to use.
- You wrap your App component in it so the whole app can use the redux store.
import React from ‘react’
import ReactDOM from ‘react-dom’
import { Provider } from ‘react-redux’
import store from ‘./store’
import App from ‘./App’
const rootElement = document.getElementById('root')
ReactDOM.render(
< Provider store={store}>
< App />
< /Provider>,
rootElement
)
What kind of state does redux let you manage?
Redux helps you manage “global” state - state that is needed across many parts of your application.
Read the answer.
Redux Libraries and Tools
Redux is a small standalone JS library. However, it is commonly used with several other packages:
React-Redux
Redux can integrate with any UI framework, and is most frequently used with React. React-Redux is our official package that lets your React components interact with a Redux store by reading pieces of state and dispatching actions to update the store.
Redux Toolkit
Redux Toolkit is our recommended approach for writing Redux logic. It contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.
Redux DevTools Extension
The Redux DevTools Extension shows a history of the changes to the state in your Redux store over time. This allows you to debug your applications effectively, including using powerful techniques like “time-travel debugging”.
What does the term “one-way data flow” mean in relation to Redux?
It means data flows in one direction around the following cycle.
- State describes the condition of the app at a specific point in time
- The UI is rendered based on that state
- When something happens (such as a user clicking a button), the state is updated based on what occurred
- The UI re-renders based on the new state
What is mutating an object or array?
It is when you change the contents of an object or array. It is the same object or array reference in memory but it’s contents have changed.
How do you update object/array values immutably?
In order to update values immutably, your code must make copies of existing objects/arrays, and then modify the copies.
We can do this by hand using JavaScript’s array / object spread operators, as well as array methods that return new copies of the array instead of mutating the original array:
How does Redux expect state updates to be done?
Redux expects that all state updates are done immutably
What is an Action in Redux?
An action is a plain JavaScript object that has a type property and an optional payload property. You can think of an action as an event that describes something that happened in the application.
What does a typical Action object look like?
const addTodoAction = {
type: 'todos/todoAdded',
payload: 'Buy milk'
}What is an Action creator ?
An action creator is a function that creates and returns an action object. We typically use these so we don’t have to write the action object by hand every time:
const addTodo = text => {
return {
type: 'todos/todoAdded',
payload: text
}
}
What is a reducer?
A reducer is a function that receives the current state and an action object, decides how to update the state if necessary, and returns the new state.
You can think of a reducer as an event listener which handles events based on the received action (event) type.
What three rules must reducers always follow?
Reducers must always follow some specific rules:
- They should only calculate the new state value based on the state and action arguments
- They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the copied values.
- They must not do any asynchronous logic, calculate random values, or cause other “side effects”
What are the steps that take place inside a reducer?
The logic inside reducer functions typically follows the same series of steps:
Check to see if the reducer cares about this action
If so, make a copy of the state, update the copy with new values, and return it
Otherwise, return the existing state unchanged
What kind of logic is allowed in a reducer to determine the new state?
Reducers can use any kind of logic inside to decide what the new state should be: if/else, switch, loops, and so on.
What two parameters does a reducer have?
state and an action.
A reducer needs an initial something , what is it?
It needs initial state.
const initialState = { value: 0 }
function counterReducer(state = initialState, action) {
// Check to see if the reducer cares about this action
if (action.type === 'counter/increment') {
// If so, make a copy of `state`
return {
...state,
// and update the copy with the new value
value: state.value + 1
}
}
// otherwise return the existing state unchanged
return state
}
What phrase sums up the array reduce method?
“The reduce method reduces the array down to one value”
Where does the current Redux application state live?
The current Redux application state lives in an object called the store .
What is a Redux selector?
Selectors are functions that know how to extract specific pieces of information from a store state value.
How do selectors help as a project gets bigger?
As an application grows bigger, selectors can help avoid repeating logic as different parts of the app need to read the same data:
What is a root reducer?
A Redux store is created using a root reducer function
The store calls the root reducer once, and saves the return value as its initial state.
Essentially the root reducer is the reducer that sets up initial state.
Redux uses a “one-way data flow” app structure, What does this mean?
State describes the condition of the app at a point in time, and UI renders based on that state
When something happens in the app:
The UI dispatches an action
The store runs the reducers, and the state is updated based on what occurred
The store notifies the UI that the state has changed
The UI re-renders based on the new state
It all flows one way!!!!
Redux uses a “one-way data flow” app structure, What does this mean?
It all flows one way!!!!
State describes the condition of the app at a point in time, and UI renders based on that state
When something happens in the app:
The UI dispatches an action
The store runs the reducers, and the state is updated based on what occurred
The store notifies the UI that the state has changed
The UI re-renders based on the new state
What is a good way of thinking about the naming of the type property of an action? E.g.’todos/addTodo’
Domain/eventname
where the first part is the feature or category that this action belongs to, and the second part is the specific thing that happened.
