08/02/2025 00:37 Redux: Redux Toolkit Cheatsheet | Codecademy
Cheatsheets / Redux
Redux Toolkit
Redux Toolkit
Redux Toolkit, also known as the @reduxjs/redux-
toolkit package, contains packages and functions that
are essential for building a Redux app. Redux Toolkit
simplifies most Redux tasks like setting up the store,
creating reducers and performing immutable updates.
createSlice() Options Object
The createSlice() function is used to simplify and /*
reduce the code needed when creating application
The action.type strings created will be
slices. It takes an object of options as an argument. The
options are: 'todos/clearTodos' and 'todos/addTodo'
name : the slice name used as the prefix of the */
generated action.type strings
const options = {
initialState : the initial value for the state to be
used by the reducer name: 'todos',
reducers : an object containing action names initialState: [],
as keys and their corresponding case reducers reducers: {
as values. The keys are used to generate action
clearTodos: state => [],
creators with the same names.
addTodo: (state, action)
=> [...state, action.payload]
}
}
const todosSlice = createSlice(options);
https://www.codecademy.com/learn/fscp-redux/modules/refactoring-with-redux-toolkit/cheatsheet 1/10
08/02/2025 00:37 Redux: Redux Toolkit Cheatsheet | Codecademy
“Mutable” Code with createSlice()
createSlice() lets you write immutable updates using /*
“mutation-like” logic within the case reducers. This is
addTodo uses the mutating push() method
because createSlice() uses the Immer library
internally to turn mutating code into immutable */
updates. This helps to avoid accidentally mutating the const todosSlice = createSlice({
state, which is the most commonly made mistake when
name: 'todos',
using Redux.
initialState: [],
reducers: {
clearTodos: state => [],
addTodo: (state, action)
=> state.push(action.payload)
}
});
https://www.codecademy.com/learn/fscp-redux/modules/refactoring-with-redux-toolkit/cheatsheet 2/10
08/02/2025 00:37 Redux: Redux Toolkit Cheatsheet | Codecademy
Slices with createSlice()
createSlice() returns an object containing a slice const todosSlice = createSlice({
reducer ( todosSlice.reducer ) and corresponding
name: 'todos',
auto-generated action creators ( todosSlice.actions ).
The slice reducer is generated from the case initialState: [],
reducers provided by options.reducers . reducers: {
The action creators are automatically generated
addTodo: (state, action)
and named for each case reducer. The
action.type values they return are a => state.push(action.payload)
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. todosSlice = {
name: "todos",
reducer: (state, action) => newState,
actions: {
addTodo: (payload) => ({type:
"todos/addTodo", payload})
},
caseReducers: {
addTodo: (state, action) => newState
}
}
*/
export { addTodo } = todosSlice.actions;
export default todosSlice.reducer;
https://www.codecademy.com/learn/fscp-redux/modules/refactoring-with-redux-toolkit/cheatsheet 3/10
08/02/2025 00:37 Redux: Redux Toolkit Cheatsheet | Codecademy
Create store with configureStore()
configureStore() accepts a single configuration import todosReducer from
object as a parameter. This object should contain a
'./todos/todosSlice';
reducer property that is either assigned a function to
be used as the root reducer or an object of slice import filterReducer from
reducers that will be combined to create a root './filter/filterSlice';
reducer. When the reducer property is an object,
configureStore() will create a root reducer using
const store = configureStore({
Redux’s combineReducers() function.
reducer: {
todos: todosReducer,
filter: filterReducer
}
});
Create the Redux Store
The createStore() helper function creates and const initialState = 0;
returns a Redux store object that holds and manages
const countUpReducer = (
the complete state tree of your app. The only required
argument is a reducer function, which is called every state = initialState,
time an action is dispatched. action
The store object returned has three key methods that
) => {
ensure that all interactions with the application state
are executed through the store : switch (action.type) {
store.getState() case 'increment':
store.dispatch(action) return state += 1;
store.subscribe(listener)
default:
return state;
}};
const store =
createStore(countUpReducer);
https://www.codecademy.com/learn/fscp-redux/modules/refactoring-with-redux-toolkit/cheatsheet 4/10
08/02/2025 00:37 Redux: Redux Toolkit Cheatsheet | Codecademy
The getState() Method
The getState() method of a Redux store returns the const initialState = 0;
current state tree of your application. It is equal to the
const countUpReducer = (
last value returned by the store ‘s reducer.
In the one-way data flow model (store → view → state = initialState,
action → store), getState is the only way for action
the view to access the store’s state.
) => {
The state value returned by getState() should
not be modified directly. switch (action.type) {
case 'increment':
return state += 1;
default:
return state;
}};
const store =
createStore(countUpReducer);
console.log(store.getState());
// Output: 0
https://www.codecademy.com/learn/fscp-redux/modules/refactoring-with-redux-toolkit/cheatsheet 5/10
08/02/2025 00:37 Redux: Redux Toolkit Cheatsheet | Codecademy
The dispatch() Method
The dispatch(action) method of a Redux store is const initialState = 0;
the only way to trigger a state change. It accepts a
const countUpReducer = (
single argument, action , which must be an object with
a type property describing the change to be made. state = initialState,
The action object may also contain additional data to action
pass to the reducer, conventionally stored in a property ) => {
called payload .
switch (action.type) {
Upon receiving the action object via dispatch() , the
store’s reducer function will be called with the current case 'increment':
value of getState() and the action object. return state += 1;
case 'incrementBy':
return state += action.payload;
default:
return state;
}};
const store =
createStore(countUpReducer);
store.dispatch({ type: 'increment' });
// state is now 1.
store.dispatch({ type: 'incrementBy'
payload: 3 });
// state is now 4.
The subscribe() Method
The subscribe(listener) method of a Redux store const printCurrentState = () => {
adds a callback function to a list of callbacks
const state = store.getState()
maintained by the store . When the store ‘s state
changes, all of the listener callbacks are executed. A console.log(`state: ${state}`);
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. store.subscribe(printCurrentState);
https://www.codecademy.com/learn/fscp-redux/modules/refactoring-with-redux-toolkit/cheatsheet 6/10
08/02/2025 00:37 Redux: Redux Toolkit Cheatsheet | Codecademy
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
states. It provides a centralized “store” for the 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.
Store
In Redux, a store is a container that manages the global
state of your application.
As the single source of truth, 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. Rather than accessing the
state directly, Redux provides functions through the
store to interact with the state.
https://www.codecademy.com/learn/fscp-redux/modules/refactoring-with-redux-toolkit/cheatsheet 7/10
08/02/2025 00:37 Redux: Redux Toolkit Cheatsheet | Codecademy
Actions
In Redux, an action is a plain JavaScript object that /*
represents an intention to change the store’s state.
Basic action object for a shopping list
Action objects must have a type property with a user-
defined string value that describes the action being that removes all items from the list
taken. */
Optional properties can be added to the action object.
const clearItems = {
One common property added is conventionally called
payload , which is used to supply data necessary to type: 'shopping/clear'
perform the desired action. }
/*
Action object for a shopping list
that adds an item to the list
*/
const addItem = {
type: 'shopping/addItem',
payload: 'Chocolate Cake'
}
https://www.codecademy.com/learn/fscp-redux/modules/refactoring-with-redux-toolkit/cheatsheet 8/10
08/02/2025 00:37 Redux: Redux Toolkit Cheatsheet | Codecademy
Reducers
In Redux, a reducer, also known as a reducing function, /*
is a JavaScript function that takes the current state of
A reducer function that handles 2
the store and an action as parameters.
Reducers calculate the new state based on the action actions
it receives. Reducers are the only way the store’s or returns the current state as a
current state can be changed within a Redux
default
application. They are an important part of Redux’s one-
way data flow model.
*/
const shoppingReducer = (
state = [],
action
) => {
switch (action.type) {
case "shopping/clear":
return [];
case "shopping/addItem":
return [
...state,
action.payload];
default:
/*
If the reducer doesn't care
about this action type, return
the existing state unchanged
*/
return state;
}
}
Installing Redux Toolkit
The @reduxjs/redux-toolkit package is added to a npm install @reduxjs/redux-toolkit
project by first installing it with npm .
Some of the resources imported from
@reduxjs/redux-toolkit are:
createSlice
configureStore
https://www.codecademy.com/learn/fscp-redux/modules/refactoring-with-redux-toolkit/cheatsheet 9/10
08/02/2025 00:37 Redux: Redux Toolkit Cheatsheet | Codecademy
Print Share
https://www.codecademy.com/learn/fscp-redux/modules/refactoring-with-redux-toolkit/cheatsheet 10/10
