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.
Top comments (0)