Redux

Question 1

What is Redux?

Answer 1

Redux is a pattern and library for managing and updating application state, using events called “actions”. It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

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

Question 2

What is the Redux Cycle

Answer 2

1) Action Creator
2) Action
3) dispatch
4) Reducer
5) State

Question 3

What is an Action Creator?

Answer 3

One of the approaches is to write action objects directly in the code, where they’re being dispatched.

dispatch({ type: ‘todos/todoAdded’, payload: trimmedText })

However, a much better approach is to use action creator functions. 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 todoAdded = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}

store.dispatch(todoAdded(‘Buy milk’))
Action creators have two primary purposes:

They prepare and format the contents of action objects
They encapsulate any additional work needed whenever we create those actions

Question 4

What is a Redux store?

Answer 4

The center of every Redux application is the store. A “store” is a container that holds your application’s global state.

• You must never directly modify or change the state that is kept inside the Redux store
• The only way to cause an update to the state is to create a plain action object and then dispatch the action
• When an action is dispatched, the store runs the root reducer function, and lets it calculate the new state based on the old state and the action
• Finally, the store notifies subscribers that the state has been updated so the UI can be updated with the new data.

Question 5

What are Actions?

Answer 5

Actions are events that occur in the app based on user input and trigger updates in the state.

They are a plain JavaScript objects that have a type field. One can think of an action as an event that describes something that happened in the application. We usually write that type string like “domain/eventName”,

A typical action object might look like this:

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

Question 6

What are Reducers?

Answer 6

Reducers are functions that take the current state and an action as arguments, and return a new state result. In other words, (state, action) => newState

A Redux app really only has one reducer function: the “root reducer” function. That one root reducer function is responsible for handling all of the actions that are dispatched, and calculating what the entire new state result should be every time.

// Use the initialState as a default value
export default function appReducer(state = initialState, action) {
  // The reducer normally looks at the action type field to decide what happens
  switch (action.type) {
    default:

  return state   } }

Question 7

What does dispatch function do?

Answer 7

Dispatch function passes an Action created through an Action Creator to the reducer, which then handles the update of the state.

Setting up redux store, limits us to only updating the state of the store with store.dispatch together with action creator that we would like to use.

We will not be able to modify the state of the store like store.state.accounting - 100;

Question 8

What is combineReducers function?

Answer 8

combineReducers accepts an object where the key names will become the keys in your root state object, and the values are the slice reducer functions that know how to update those slices of the Redux state.

import { combineReducers } from ‘redux’

const rootReducer = combineReducers({
  // Define a top-level state field named `todos`, handled by `todosReducer`
  todos: todosReducer,
  filters: filtersReducer
// the key names you give to combineReducers decides what the key names of your state object will be!
})

Question 9

How do you create a Redux store?

Answer 9

A Redux app really only has one reducer function: the “root reducer” function that you will pass to createStore.

One way is to use combineReducers function to create a root Reducer.

Then, we need to pass this reducer when we create Redux store.

const store = Redux.createStore(rootReducer);

Question 10

What are the components that you create with the help of react-redux?

Answer 10

Provider - The Provider component makes the Redux store available to any nested components that need to access the Redux store. most applications will render a Provider at the top level, with the entire app’s component tree inside of it.

Connect - We wrap the component, we would like to access the global state with. It communicates with the Provider

Question 11

What is the folder structure for creating a redux app?

Answer 11

/src
  /actions - Contains files related to action creators
  /components
  /reducers - Files related to reducers
  index.js

Question 12

What is useSelector hook?

Answer 12

useSelector is a custom hook that comes together with the react-redux library.
It accepts a single function, which we call a selector function. A selector is a function that takes the entire Redux store state as its argument, reads some value from the state, and returns that result.

useSelector automatically subscribes to the Redux store for us! That way, any time an action is dispatched, it will call its selector function again right away. If the value returned by the selector changes from the last time it ran, useSelector will force our component to re-render with the new data. All we have to do is call useSelector() once in our component, and it does the rest of the work for us.

Question 13

What is the caveat that differs useSelector from mapStateToProps

Answer 13

useSelector diverges from mapStateToProps in one fairly big way: it uses strict object reference equality (===) to determine if components should re-render instead of shallow object comparison.

useSelector is returning a different object literal each time it’s called. When the store is updated, React Redux will run this selector, and since a new object was returned, always determine that the component needs to re-render. The simple rule to avoid this is to either call useSelector once for each value of your state that you need:

const count = useSelector(state => state.counter.count);
const user = useSelector(state => state.user);

or, when returning an object containing several values from the store, explicitly tell useSelector to use a shallow equality comparison

import { shallowEqual, useSelector } from ‘react-redux’;

const { count, user } = useSelector(state => ({
count: state.counter.count,
user: state.user,
}), shallowEqual);

Question 14

What is useDispatch hook?

Answer 14

The React-Redux useDispatch hook gives us the store’s dispatch method as its result.

It gives us access to dispatch function that allows us to update the global state variables.

const dispatch - useDisptach();

dispatch(addToto(todo));

Question 15

What are Selectors?

Answer 15

Selectors are functions that know how to extract specific pieces of information from a store state value. As an application grows bigger, this can help avoid repeating logic as different parts of the app need to read the same data.

const selectCounterValue = state => state.value

Question 16

What is redux-thunk?

Answer 16

Redux thunk is a middleware that helps us to deal with asynchronous action creators.

The word “thunk” is a programming term that means “a piece of code that does some delayed work”. For Redux specifically, “thunks” are a pattern of writing functions with logic inside that can interact with a Redux store’s dispatch and getState methods.

What redux thunks essentially allows us to do, is to return a function instead of just a plain object from an action creator.

This function having completed, has access to getState and dispatch methods, and will run another dispatch, this time returning an object.

Question 17

How do we add redux thunk into our project?

Answer 17

We need to add it into our store

const store = createStore(reducers, applyMiddleware(thunk));

Then, redux thunk will handle all action creators, that are functions - meaning, deal with asynchronous code.

Example of an asynchronous action creator:

export const fetchPosts = () => async (dispatch) => {
  const response = await api.getPosts();

dispatch({ type: “FETCH_POSTS”, payload: response });
};

Question 18

What are the rules of Reducers?

Answer 18

• Must return any value besides undefined
• Produces state or data to be used inside of your app using previous state and the action
• Must not return reach ‘out of itself’ to decide what value to return (reducers are pure)
• Must not mutate its input ‘state’ argument

Question 19

What are the rules of Action Creators?

Answer 19

• Action Creators must return action objects
• Actions must have a type property
• Actions can optionally have a ‘payload’

Question 20

What are the two ways of extracting logic to get one single item from an Array from the global state?

Answer 20

First option is, that 
const mapStateToProps = (state, ownProps) => 

accepts ownProps attribute, which then can be referenced to find the selected item by id or any other property.

Another way is to use function composition and wrap the selectUser selector with a function that accepts userId as an argument.

const selectUser = (userId) => (state) =>
  state.users.find((user) => user.id === userId);

Question 21

How can you memoize the api call results in the global state?

Answer 21

We can make use of a _.memoize function that is accessible in the lodash library. This approach has one flaw - you are not able to refetch the data using the specific action creator. Another approach is to create a fetchUsersAndPosts function which will reduce the
no. of api calls.

const _fetchUser = _.memoize(async (id, dispatch) => {
    const user = await api.getUser(id);

dispatch({ type: "FETCH_USER", payload: user }); });

export const fetchUser = (id) => (dispatch) => _fetchUser(id, dispatch);