Redux

Question 1

What does redux allow you to do?

Answer 1

It lets your React components read data from a Redux store, and dispatch actions to the store to update state.

Question 2

How do you install react redux?

Answer 2

npm install react-redux

Question 3

What packages do you need to install to use react toolkit?

Answer 3

I think you need all of these check this…

npm install redux
npm install react-redux
npm install @reduxjs/toolkit

Question 4

1. What does the Provider component do?
2. what prop does it require?
3. Where do you place the component?

Answer 4

1. The Provider component makes the Redux store available to the rest of your app.
2. It requires the store prop provided with the redux store to use.
3. 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
)

Question 5

What kind of state does redux let you manage?

Answer 5

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

Question 6

Read the answer.

Answer 6

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”.

Question 7

What does the term “one-way data flow” mean in relation to Redux?

Answer 7

It means data flows in one direction around the following cycle.

1. State describes the condition of the app at a specific point in time
2. The UI is rendered based on that state
3. When something happens (such as a user clicking a button), the state is updated based on what occurred
4. The UI re-renders based on the new state

Question 8

What is mutating an object or array?

Answer 8

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.

Question 9

How do you update object/array values immutably?

Answer 9

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:

Question 10

How does Redux expect state updates to be done?

Answer 10

Redux expects that all state updates are done immutably

Question 11

What is an Action in Redux?

Answer 11

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.

Question 12

What does a typical Action object look like?

Answer 12

const addTodoAction = {
    type: 'todos/todoAdded',
    payload: 'Buy milk'
}

Question 13

What is an Action creator ?

Answer 13

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
  }
}

Question 14

What is a reducer?

Answer 14

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.

Question 15

What three rules must reducers always follow?

Answer 15

Reducers must always follow some specific rules:

1. They should only calculate the new state value based on the state and action arguments
2. 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.
3. They must not do any asynchronous logic, calculate random values, or cause other “side effects”

Question 16

What are the steps that take place inside a reducer?

Answer 16

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

Question 17

What kind of logic is allowed in a reducer to determine the new state?

Answer 17

Reducers can use any kind of logic inside to decide what the new state should be: if/else, switch, loops, and so on.

Question 18

What two parameters does a reducer have?

Answer 18

state and an action.

Question 19

A reducer needs an initial something , what is it?

Answer 19

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
}

Question 20

What phrase sums up the array reduce method?

Answer 20

“The reduce method reduces the array down to one value”

Question 21

Where does the current Redux application state live?

Answer 21

The current Redux application state lives in an object called the store .

Question 22

What is a Redux selector?

Answer 22

Selectors are functions that know how to extract specific pieces of information from a store state value.

Question 23

How do selectors help as a project gets bigger?

Answer 23

As an application grows bigger, selectors can help avoid repeating logic as different parts of the app need to read the same data:

Question 24

What is a root reducer?

Answer 24

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.

Question 25

Redux uses a “one-way data flow” app structure, What does this mean?

Answer 25

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!!!!

Question 26

Redux uses a “one-way data flow” app structure, What does this mean?

Answer 26

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

Question 27

What is a good way of thinking about the naming of the type property of an action? E.g.’todos/addTodo’

Answer 27

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.