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
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
- 1You’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…
- 2Before 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 …
- 3Before 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…
- 4In 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 =…
- 5Because 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…
- 6So 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…
- 7Let’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…
- 8Redux 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory