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.
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.
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 Example Tutorial From Scratch. We connect the React Native app to Redux store to save and retrieve the application data.
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.
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.
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.