Redux Toolkit (Immer & Thunk)

Redux Toolkit (Immer & Thunk)

A brief walkthrough of Redux Toolkit’s use of Immer and Thunk middleware to directly mutate state and make asyncronus fetch calls…

In my last post I did a short walk through of refactoring existing Redux code to utilize the Redux Toolkit and React-Redux Hooks. That article can be found (here) and seeing as I will be adding on to the demo started there it may be a good place to start. Now, two additional bits of Redux Toolkit functionality I wanted to touch on deal with directly mutating state within our slice (thanks to Immer) and then also making asynchronous HTTP calls (thanks to Thunk). So stick around and I’ll walk you through the process of adding these functionalities to our previous demo.

Let’s start with just a quick look at our previous code.

Image for post

Store (left), Slice(center), App Component(right)

We have our basic store setup, our Slice with some simple state that our App Component is subscribed to and a dispatch method that will increase the ‘itemCount’ within our state.

Image for post

Adding

to App.js

Let’s dive straight in with some changes to our App component. I’ll start off by now incorporating actual item objects into our application. It will have a simple form that our users will fill out to create a new item and add it to their cart. Leaving the onSubmit blank, we’ll come back to it in a moment once we’ve written our dispatch method that will add it to our state within Redux. Next we need to go to our storeSlice.

react redux

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Redux | How To Use Redux In React Native

React Native Redux Example Tutorial From Scratch. We connect the React Native app to Redux store to save and retrieve the application data.

React and React Redux — Connecting to Redux

Redux is a light weighted State Management Tool that helps the components in our React App to communicate with each other. The simple concept behind this is that every state of the component is kept in a store that will be global. So that every component can access any state from that store.

Accessing Redux from Components In React & React Native

How to set up a basic version of Redux in your React or React Native application. To make things clearer, I based my setup on my event application, where users create events that other users attend. We generated the action creators, reducers, and Redux store, and wrapped the application in a provider.

A Basic Redux Setup in React/React Native

Redux is a powerful state management tool that can be very useful as your React or React Native application grows and requires you to keep track of more state.