![]() ![]() ~/mern-login-signup-component/client/src. Part of being an “opinionated” package, RTK if used with CRA to create a react project and even in the docs has a file structure that it recommends, however it is not necessary to follow this, it’s just a guideline, before RTK, actions would live in a folder called actions, reducers would live in a folder called reducers and components would have their own folder, while store.js would live in the root src directory Now since that’s out of the way, we will look at the RTK recommended file structure. You can check out the MERN Login Signup Component on GitHub, as of writing this post I’m upgrading the project, so the code in the master repo may change, however the old redux code from the old version of this project can be accessed on it’s archive branch, and the new upgraded branch with the RTK code is in the modern-refactor-upgrade branch, with the RTK code written in JS that is shown in this post is based off, I will be refactoring the code to TypeScript soon, so the last commit with the RTK code in plain JS can be found on the commit d448afe86a. We will walk step-by-step through each Redux component, and show how RTK’s monumental improvements over the old way of writing Redux code, with the old Redux implementation going first, you will notice that boiler plate has been largerly removed, and writing code for say state changes in the Reducer has been simplified. I will be using my project mern-login-signup-component to illustrate the changes and improvements that RTK brings, this project was originally written in class based React with the old Redux implmentation, but in the past few days I have refactored it to functional component and hooks based React and RTK. Installing RTK in an existing project :- npm install a new React CRA based Project with RTK pre-installed :- npx create-react-app my-app -template reduxĭifferences and Improvements that RTK brings over old Redux There is also something called RTK query that can replace Async Thunks for data fetching in some cases, but we will not be getting into that for this article.Īnd like the Fat Homer vs Buff Homer banner image for this article, RTK has also slimmed down with almost no boilerplate needed to use it. ![]() RTK is a Hooks based incarnation of Redux that simplifies Redux development, with quality of life improvements, like the ability to write mutable state updates in Reducers which are converted to Immutable state updates behind the scenes using a library called Immer, and auto-generated Actions from the Reducers themselves using Autodux, along with out-of-the-box support for Thunks. Redux Toolkit, which I’ll call RTK going forward, is the new and improved official, batteries included, opioninated package for writing standard Redux today as recommended by the Redux Developers team. ![]() In this post, we will go over how Redux Toolkit has simplified and modernized Redux development with minimal boilerplate code and quality of life improvements What is Redux Toolkit anyway ? ![]() Differences Between Redux and Redux Toolkit and Why Should You Upgrade Saturday, NovemPosted in ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |