In this tutorial, we’ll take a look at the Redux Toolkit and build a simple project that demonstrates creating a Redux store, with reducers, actions and state selection all using the tools provided in the Redux Toolkit.
Code for the project is here: github.com/codebubb/redux-toolkit-tutorial
React Project: Using the Redux Toolkit
00:00 Introduction 00:29: Project overview 02:33 Creating the store 04:27 Creating a reducer 09:14 Creating typed hooks 11:17 The CatList component (useAppSelector, useAppDispatch example) 16:31 Selecting from the store 18:57 Creating the CatComponent 25:46 Upvoting a cat using useAppDispatch 29:14 Resetting cat up-votes 30:33 The header component (accessing state anywhere in the app) 36:34 Wrap-up
So maybe you’ve used Redux with React before or perhaps you’ve never heard of Redux but in this React tutorial we’ll take a look at how you can create a simple app (cat based!) that uses Redux and the Redux toolkit for state management.
We’ll start off by creating the store and, as we’ll be using TypeScript with React, we’ll need to do a bit of setup to ensure the data in our store is typed correctly.
With the Redux store setup, we’ll move on to creating a slice of state using the Redux Toolkit createSlice function which does lots of the setup and heavy lifting for us. You’ll see how we can use this function to setup reducers and actions for our slice of state.
With the store and reducers setup, we’ll then take a look at how to actually dispatch actions to our store and also to select data from the slice of state by creating a component that will hold a list of cats.
Once we’re comfortable with dispatching actions and selecting data, we’ll create an individual cat component that will display a cat by retrieving data from the store and then we’ll create individual reducers and actions for upvoting a cat image and also resetting a cat’s upvote count.
To wrap-up we’ll demonstrate how using Redux in a React app can enable you to access your state anywhere within your app by creating a final ‘Header’ component that displays the total count of cat upvotes and also gives a final action to reset all upvotes across the cat slice state.
So I hope you find this Junior Developer Central video on Redux and the Redux toolkit helpful and feel free to drop a comment if you get stuck with anything if you’re following along.