Redux

Question 1

What is Redux?

Answer 1

A state manager for React applications.

Question 2

What are the three key concepts in Redux?

Answer 2

Store (eg CounterState/UserState)
Actions (eg increment, decrease)
Reducers

Question 3

Stores

Answer 3

import {configureStore} from “@reduxjs/toolkit”

export const store = configureStore({reduce: {},})

export type RootState = ReturnType<typeof>
export type AppDispatch = typeof store.dispatch</typeof>

_——————————————
RootState type gives us type checks.

Question 4

Actions

Answer 4

Actions are things you can do to overwrite the state.

Actions have types (strings) and optional payloads of information.

Payloads are an optional variable you can add to actions (eg if incrementingByAmount)

Question 5

Reducers

Answer 5

Reducers use the type of action to know what to do to the store.

Reducers don’t ever directly change the state (which is immutable), it makes updates to a copy of the state and overwrites the entire state..

Question 6

Providers

Answer 6

We need to provide the store with a provider to our app component .

Question 7

createSlice

Answer 7

Slices are used for managing parts of your stores.

Note: states are immutable but when you use createSlice it allows you to write mutating code e.g. in the increment below.
_______________________________

const counterSlice = createSlice){name: “counter”, initialState, reducers: { increment: (state) => state.value +=1} , }, })

export const {increment, decrement} = counterSlice.actions
export default counterSlice.reducer

Question 8

useSelector

Answer 8

This is how we get the state values in a component.
useSelector is a redux hook

Question 9

useDispatch

Answer 9

This is how we dispatch actions to influence the store.
useDispatch is a redux hook.

Question 10

async reducers

Answer 10

these use createAsyncThunk and go in extraReducers instead of reducers in creating the slice.