A brief introduction to redux toolkit

Very much a beginners guide

3 min readJul 4, 2022

The bigger the project the more plates that need to be kept spinning. This is particularly true of a software project with multiple states that need to be used at various different points within an increasingly complex organogram of components which make a modern react web app. In this article I will look to explain the uses and the basic set up of redux toolkit for state management in react.

What is redux, why should I use it, why is there a toolkit?

Redux helps you to manage state app-wide. State that you would like to share across multiple features and components, such as user authentication status can be managed within redux. An alternative to redux for state management is context API, so there’s a choice if you prefer. I decided to use redux, and thanks to the toolkit, the amount of boilerplates that redux has is greately reduced. Essentially redux toolkit as a package helps you to write redux more elegantly.

How does it work?

As mentioned redux is state management library, how it works in essence is a circular flow, this image is probably the clearest I have found:

image source: https://stackoverflow.com/questions/45416237/axios-calls-in-actions-redux

State defines the UI, which is triggers Actions, which are sent to Reducers, which update the Store, which contains the state and we are back at the beginning! At a high level we click a button which triggers a dispatch function (action), which is sent to a reducer function which updates the state in the store. After the state updates a re-render of components will occur automatically with the new state.

Installing Redux Toolkit

installing redux toolkit can be done using the following:

npm install @reduxjs/toolkit react-redux

Alternatively, if you are starting completely fresh, you can use:

npx create-react-app name-here --template redux

The second part creates a new react app with redux toolkit fully installed for you to use. The documentation is well maintained and incredibly clear as to what it can do and is found here:

Getting Started | Redux Toolkit

The Redux Toolkit package is intended to be the standard way to write Redux logic.

redux-toolkit.js.org

Slices and reducers

A slice houses the action creators and action types that correspond to the reducers and state. To create a slice the rather elegant function required is createSlice() a function within the toolkit API that forms the standard approach to writing redux logic. Under the hood it uses createAction and createReducer so it also allows the use of Immer to write “mutating” immutable updates, which isn’t readily possible in vanilla redux.

createSlice requires three fields, the name, initialState and reducer

name identifies the name of our slice.
initialState is the initial state value of the state.
reducers is an object that will contain functions.

If you followed the second route to install redux toolkit and redux you should have some demo code to have a look at around it which makes a simple counter app, and some reducers.

There is plenty more within it, but slices and reducers, are at the core of getting your state to be managed and accessible where needed.

I am still learning the full scope and scale of redux and the power that toolkit provides. As I find out more about toolkit and applications I will look to write more.