7/25/2023 0 Comments Redux toolkit exampleIf you are a solo developer working on a small project, it makes sense to use Redux Toolkit in a way that many developers in a large project would not. But before we do, I want to mention that Redux Toolkit is a very versatile tool that developers use based on their individual needs. Now is the time to really get down to working with Redux Toolkit. Once you do the above, you should be able to see open with your “hello world” text in the index.tsx file. Run yarn dev or npm run dev (depending on your package manager) to get the project running on dev.Create a functional component in there and some content like “hello world”, so that you will have something to see when you action the next step. Inside the pages directory, create an index.tsx file.In the root of the project, create a src directory and create these 3 sub-directories: pages, features and app.Once cloned, install the packages and delete the components, interfaces, pages and utils folders as they contain some files we won't be using for this demo.Clone the Next + TS starter project here.This will help us focus on getting introduced to Redux Toolkit and not be distracted with the bells and whistles involved in bringing server-side rendering into the picture.įirst things first, let's get our project started. We also use TypeScript because it helps us write less error-prone code, is documentation in itself and helps with project maintenance far into the future.īefore we begin, I would like to mention that the app that we will be creating today will only use client-side rendering. Redux toolkit in Next.js and TypeScriptĪt Merix, we use Next.js as our preferred tool for when a project needs React, because it comes preloaded with many things we look for when deploying production-ready apps. Now that you are familiar with what Redux Toolkit is and the reason for its being, let me get to the main aim of this post: get introduced to using Redux Toolkit in an app using Next.js and TypeScript. It also comes loaded with some useful utilities that were popular with the standalone Redux, in order to handle the most common use cases. Simply put, Redux Toolkit provides us with tools that help abstract over the setup process that used to be troublesome. ![]()
0 Comments
Leave a Reply. |