Redux Flashcards
Core Redux API
Create the Redux Store
The createStore() helper function creates and returns a Redux store object that holds and manages the complete state tree of your app. The only required argument is a reducer function, which is called every time an action is dispatched.
The store object returned has three key methods that ensure that all interactions with the application state are executed through the store:
- store.getState()
- store.dispatch(action)
- store.subscribe(listener)
Core Redux API
Reducers (to do list)
Core Redux API
The getState() Method
The getState() method of a Redux store returns the current state tree of your application. It is equal to the last value returned by the store‘s reducer.
In the one-way data flow model (store → view → action → store), getState is the only way for the view to access the store’s state.
The state value returned by getState() should not be modified directly.
Core Redux API
The dispatch() Method
The dispatch(action) method of a Redux store is the only way to trigger a state change. It accepts a single argument, action, which must be an object with a type property describing the change to be made. The action object may also contain additional data to pass to the reducer, conventionally stored in a property called payload.
Upon receiving the action object via dispatch(), the store’s reducer function will be called with the current value of getState() and the action object.
Core Redux API
The subscribe() Method
The subscribe(listener) method of a Redux store adds a callback function to a list of callbacks maintained by the store. When the store‘s state changes, all of the listener callbacks are executed. A function that unsubscribes the provided callback is returned from subscribe(listener).
Often, store.getState() is called inside the subscribed callback to read the current state tree.
const printCurrentState = () => { const state = store.getState() console.log(state: ${state}); } store.subscribe(printCurrentState);
Core Redux API
Action Creators
An action creator is a function that returns an action, an object with a type property and an optional payload property. They help ensure consistency and readability when supplying an action object to store.dispatch(), particularly when a payload is included.
Core Redux API
Slices
A slice is the portion of Redux code that relates to a specific set of data and actions within the store‘s state.
A slice reducer is the reducer responsible for handling actions and updating the data for a given slice. This allows for smaller reducer functions that focus on a slice of state.
Often, the actions and reducers that correspond to the same slice of the state are grouped together into a single file.
Core Redux API
The combineReducers() Function
The combineReducers() helper function accepts an object of slice reducers and returns a single “root” reducer. The keys of the input object become the names of the slices of the state and the values are the associated slice reducers.
The returned root reducer can be used to create the store and, when executed, delegates actions and the appropriate slices of state to the slice reducers and then recombines their results into the next state object.
Core Redux API
Introduction To Redux
A React application can share multiple points of data across components. In many cases managing the data shared can become a complex task.
Redux is a library for managing and updating application state. It provides a centralized “store” for state that is shared across your entire application, with rules ensuring that the state can only be updated in a predictable fashion using events called “actions”.
Redux works well with applications that have a large amount of global state that is accessed by many of the application’s components. The goal of Redux is to provide scaleable and predictable state management.
Core Redux API
Store
In Redux, a store is a container that holds and manages your application’s global state.
The store is the center of every Redux application. It has the ability to update the global state and subscribes elements of an application’s UI to changes in the state. Accessing the state should never be done directly and is achieved through functions provided by the store.
Core Redux API
Actions
In Redux, an action is a plain JavaScript object that represents an intention to change the store’s state. Action objects must have a type property with a user-defined string value that describes the action being taken.
Optional properties can be added to the action object. One common property added is conventionally called payload, which is used to supply data necessary to perform the desired action.
Core Redux API
Reducers
A reducer (also called a reducing function) is a plain JavaScript function that accepts the store’s current state and an action and returns the new state.
Reducers calculate the new state based on the action it receives. Reducers are the only way the store’s current state can be changed within a Redux application. They are an important part of Redux’s one-way data flow model.
Connect to React with React Redux
react-redux Package
The react-redux package, the official Redux-UI binding package for React, lets your React components interact with a Redux store without writing the interaction logic yourself. This allows an application to rely on Redux to manage the global state and React to render the UI based on the state.
Interactions may include reading data from a Redux store and dispatching actions to the store.
Connect to React with React Redux
Install react-redux
The react-redux package is added to a React/Redux project by first installing it with npm.
A few of the resources imported from react-redux are:
- Provider
- useSelector
- useDispatch
npm install react-redux
Connect to React with React Redux
The Provider Component
The component makes the Redux store available to a nested child component. The store should be passed in as the store prop.
All child components of the component can now use the resources provided by react-redux to access the Redux store including retrieving data and dispatching actions.
Connect to React with React Redux
The useSelector() Hook
The useSelector() hook extracts state data from the Redux store using a selector function each time the state is updated. Any component nested within may access state using useSelector(). Selectors used with useSelector() can be pre-defined functions or inline selectors.
When called within a React component useSelector(selector) accomplishes two things:
- Returns the data retrieved by the selector
- Subscribes the React component to changes in the store and forces a re-render if the selector’s result changes
Connect to React with React Redux
The useDispatch() Hook
The useDispatch() hook returns a reference to the store.dispatch() method. It must be used within a React component that is nested within the component.
By convention, a React component defines dispatch and assigns the reference returned by useDispatch(). dispatch() can then be used within the component to dispatch action objects.
Connect to React with React Redux
Selectors
In Redux, selectors are user-defined functions that extract specific pieces of information from a store state value. Selectors are pure functions that take the state as an argument and React components can use selectors to get specific data from the store.
By convention selector function names start with select and describe the data they retrieve from the store.
Connect to React with React Redux
Selectors
In Redux, selectors are user-defined functions that extract specific pieces of information from a store state value. Selectors are pure functions that take the state as an argument and React components can use selectors to get specific data from the store.
By convention selector function names start with select and describe the data they retrieve from the store.
Refactoring with Redux Toolkit
createSlice() Options Object
The createSlice() function is used to simplify and reduce the code needed when creating application slices. It takes an object of options as an argument. The options are:
- name: the slice name used as the prefix of the generated action.type strings
- initialState: the initial value for the state to be used by the reducer
- reducers: an object of action names and their corresponding case reducers
Refactoring with Redux Toolkit
“Mutable” Code with createSlice()
createSlice() lets you write immutable updates using “mutation-like” logic within the case reducers. This is because createSlice() uses the Immer library internally to turn mutating code into immutable updates. This helps to avoid accidentally mutating the state, which is the most commonly made mistake when using Redux.
Refactoring with Redux Toolkit
Slices with createSlice()
createSlice() returns an object containing a slice reducer (todosSlice.reducer) and corresponding auto-generated action creators (todosSlice.actions).
- The slice reducer is generated from the case reducers provided by options.reducers.
- The action creators are automatically generated and named for each case reducer. The action.type values they return are a combination of the slice name (‘todos’) and the action name (‘addTodo’) separated by a forward slash (todos/addTodo).
When creating slices in separate files it is recommended to export the action creators as named exports and the reducer as a default export.
Refactoring with Redux Toolkit
Create store with configureStore()
configureStore() accepts a single configuration object parameter. The input object should have a reducer property that is assigned a function to be used as the root reducer, or an object of slice reducers which will be combined to create a root reducer. When reducer is an object configureStore() will create a root reducer using Redux’s combineReducers().
Async Actions with Middleware and Thunks
Thunks
A thunk is a function used to delay a computation until it is needed by an application. The term thunk comes from a play on the word “think” but in the past tense.
In JavaScript, functions are thunks since they hold a computation and they can be executed at any time or passed to another function to be executed at any time.
A common practice is for thunks to be returned by a higher-order function. The returned thunk contains the process that is to be delayed until needed.
Async Actions with Middleware and Thunks
Thunks in Redux
In Redux thunks can be used to hold asynchronous logic that interacts with the Redux store. When thunks are dispatched to the store the enclosed asynchronous computations are evaluated before making it to the Redux store. The arguments passed to thunks are the Redux store methods dispatch and getState. This allows actions to be dispatched or for the state to be referenced within the containing logic.
Other benefits of thunks are:
- Creating abstract logic that can interact with any Redux store
- Move complex logic out of components
Async Actions with Middleware and Thunks
Redux Thunk Middleware
The redux-thunk middleware package allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action or to dispatch only if a certain condition is met.
Async Actions with Middleware and Thunks
createAsyncThunk()
createAsyncThunk() accepts a Redux action type string and a callback function that should return a promise. It generates promise lifecycle action types based on the action type prefix that you pass in, and returns a thunk action creator that will run the promise callback and dispatch the lifecycle actions based on the returned promise.
The callback function takes a user-defined data argument and a thunkAPI object argument. The data argument is originally sent as an argument to the thunk action creator where an object can be used if multiple points of data are necessary. The thunkAPI object contains the usual thunk arguments such as dispatch and getState.
Async Actions with Middleware and Thunks
extraReducers Property
The object passed to createSlice() may contain a fourth property, extraReducers, which allows createSlice() to respond to other action types besides the types it has generated. This is useful when handling asynchronous logic using thunks.
The logic within extraReducers that acts on the slice of state can safely use mutatable updates because it uses Immer internally.
