Setting up and using the reduxjs toolkit (RTK)

This is the first blog in series of blogs where we will be using the Reduxjs Toolkit library(RTK) to build an application to add fruits with their count.

Goal:

The design of the application is that we will be adding a fruit with its count and the fruit will be added in the fruit list.The adding of fruit and displaying the fruits list will be in two separate components so we have to use the redux for our app wide state management.

The final application can be found here:

https://fruits-logger-redux-toolkit.netlify.app/

The complete code can be found here:

https://github.com/abhidatta0/fruits-logger-redux-toolkit

Let's start

First, we will be using the below command to generate a react boilerplate (without the RTK)

npx create-react-app fruitslogger

Then , install the RTK and react-redux library

npm install @reduxjs/toolkit react-redux

@reduxjs/toolkit
is for providing the core redux functionality and

react-redux
is for integrating our react code with redux.

Now,create a file store.js in root folder of our project and add the code for a simple store and hook it up to our App.js file.

If we npm start and run in the browser , we will be getting an console error Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers..
So let's fix that issue but before that let us build the UI.