Refactoring with Redux Toolkit

Improve your code with Redux Toolkit, an essential package for any Redux application.

Start

Key Concepts

Review core concepts you need to learn to master this subject

Redux Toolkit

Installing Redux Toolkit

createSlice() Options Object

“Mutable” Code with createSlice()

Slices with createSlice()

Create store with configureStore()

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.

The Redux Toolkit

Lesson 1 of 1

1
Intro to Redux Toolkit
You’ve seen how verbose working with Redux can be. There’s a lot of moving parts and semantics to remember. You’d be far from alone. Some common issues/complaints people have when using Redux incl…
Start
2
Installing Redux Toolkit
Before you can take advantage of the benefits of the Redux Toolkit, you must first install the @reduxjs/toolkit package into your application. You can do this with the Node Package Manager. While …
Start
3
"Slices" of State
Before we dive deeper into this lesson, let’s refresh our memory about what we’re referring to when talking about a “slice” of state. A normal Redux application has a JS object at the top of its s…
Start
4
Refactoring with createSlice()
In the last exercise, we looked at one way to define a slice reducer and the associated action creators. /* todosSlice.js */ const addTodo = (todo) => { // logic omitted… } const toggleTodo =…
Start
5
Writing "Mutable" Code with Immer
Because Redux reducers must never mutate state, we often write immutable updates by using JavaScript’s array and object spread operators and other functions that return copies of the original value…
Start
6
Return Object - Actions
So far we’ve taken a look at the object that is passed to createSlice(), but what exactly does it return? Using todosSlice from the previous exercise as an example, createSlice() would return an o…
Start
7
Return Object - Reducers
Let’s now take a closer look at reducer in the return object of createSlice(). const options = { // options fields omitted. } const todosSlice = createSlice(options); /* Object returned by todo…
Start
8
Converting the Store to Use `configureStore()`
Redux Toolkit has a configureStore() method that simplifies the store setup process. configureStore() wraps around the Redux library’s createStore() method and the combineReducers() method, and han…
Start
9
Review
Congratulations! You were able to apply a couple of Redux Toolkit’s essential methods in order to refactor and simplify some existing Redux logic. * Redux Toolkit (RTK) contains pack…
Start