<html><body>Blog Content (1000 - 3000 words):For a more enjoyable experience on this blog, I suggest that you have the following prerequisites:<ul><li>A basic understanding of React hooks.</li><li>Familiarity with mutating objects in Javascript. </li><li>Fundamental knowledge of Typescript.</li><li>Installation of the  Redux Devtools extension on browser.</li></ul>Let’s get started!<h2>What is Redux Toolkit?</h2>Redux Toolkit is a powerful package developed by the Redux team to simplify the usage of Redux, speed up development, and promote a standardized approach to writing Redux logic.It aims to address common challenges developers face, including:<ul><li>The complexity of configuring a store.</li><li>The need to include numerous packages such as middleware, selectors, etc.</li><li>The excessive boilerplate code that Redux often demands.</li></ul>Redux Toolkit comprises several small packages:<ul><li>Redux: The core of state management.</li><li>ImmerJs: Simplifies working with immutable state.</li><li>RTK Query: A powerful tool for fetching and caching data.</li></ul>Before delving into Redux Toolkit, it’s beneficial if you have prior knowledge with Redux. If you’re already family with Redux and its core concept, feel free to skip this section. However, for those who need a fresher, I’ve prepared a brief overview of Redux. <h3>What is Redux?</h3>Redux is a pattern and library for managing the state of an application in a more organized and predictable way. With Redux, the entire state of an application is managed within a single immutable object. Every update to the Redux state results in a new copy of the state, plush the new changes.In the past, without Redux, our data would be tied to individual components, necessitating the passing of data through every level of components. <img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-obOmi3FvlQ65shF76KD5xOOpAXLtTFT9auc4MHmg.png"><h3>How does Redux work?</h3>Redux includes 4 core components:<ul><li>Store </li><li>Actions</li><li>Dispatch</li><li>Reducers</li></ul>Let’s explore the role of each component.<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-dWHsnSyhqxTH8eujI8hJX6WuDw8khSsx9qy2b0SS.png">The Store: The central repository of the application's state. It contains the entire state tree, providing a comprehensive snapshot of application’s data.Actions: Used to send data from an application to the Redux store. An action is an object with two properties: type and payload (optional). The type property describes the action and is generally an uppercase string. The payload is additional data that we want to pass along with the action.Dispatch: Function that allows sending an action to update the state of application. When calling dispatch, the store runs an action through all of the available reducers, which in turn update the state accordingly.Reducers: These functions that specify how the application's state changes in response to actions. Reducers take two params: state and an action, and return a new state. They are pure functions and should not modify the state directly.I hope that you are already familiar with Redux and its core concepts above. Let's take a look at these images below, where I compare code without using Redux Toolkit and with Redux Toolkit.createStore:<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-XliXHb73JCtHFQrUJNBTsslIaGulYL72YYgLAvw1.png"><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-a3BUuU5Rfaomwm9hNAwrQTgkwzk8tIm5MOQzWsM3.png"> createReducer:<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-Mg47STslxKT2rjU8JZGrg9oH3FyY92fERnkOJJVC.png"><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-t37chrECSRatYRBwhgKAbKXgBar2oGknM9OOjsw8.png">createAction:<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-DuDGrH7bvJA3hpj0hafOsE54iQmTZsHivrEHQA1b.png"><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-fVUvYUH9eS3Mxkxn4lWlF2B0mXniAnF8xeCIfpzn.png">You may notice that Redux can sometimes become rather verbose. This verbosity stems from the need to go through multiple steps in creating a comprehensive Redux store, resulting in the generation of numerous files containing repetitive code. Furthermore, Redux lacks a clear standard for structuring logic, and in some cases, we find ourselves having to install additional libraries like middleware, selectors, etc. to effectively manage state logic.This is why Redux Toolkit was developed to address many of the issues mentioned above.<h2>II.   How does Redux Toolkit work?</h2><h3>Step 1: Setting up an application</h3><ol><li>Start by creating a new React project with Typescript using the following command in the terminal.</li></ol>npx create-react-app blog --template typescript   cd blog   yarn add -D prettier eslint-plugin-prettier eslint-congig-prettier<ol start="2"><li>Open package.json file for configuration (line 6 - 10)</li></ol> <img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-VYrrMGkQ2LOUqczmhmkNjAMCT3Sw6zwbJ9vLvHe0.png"><ol start="3"><li>Create .prettierrc file in the blog directory</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-GNNfusKdeMU87qZAWTCefVcyAJoMPUgyOTAvCXJ8.png"><ol start="4"><li>Create .eslintrc file in the blog directory</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-45n1en220fVJlORmPoJwOcKn7JC6MNLrsgNthdnQ.png"><ol start="5"><li>Create .editorconfig file in the blog directory</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-D05qnCGrPTrAeB76Gnlrwz7C9u856Fw8c4i4lZjt.png"><ol start="6"><li>Open tsconfig.json (line 18)</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-HPzMLlm0gi3ksZdi6yAHT78HtFfPFuTozB9ZWe4f.png"><ol start="7"><li>Install Tailwinds CSS:</li></ol>yarn add tailwindcss postcss autoprefixer npx tailwindcss init -pOpen tailwind.config.js file<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-4I1EPTdYx0fRosi7pt0TrHh3mSaYQkhZq5v3desa.png"> <ol start="8"><li>Open index.css in the blog/src/ directory</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-bGnsrGtcGjutzKBMfebENnWh6pEwMOhtckp6UvzO.png"><ol start="9"><li>Remove any unnecessary folders or files. The source code structure should look like this.</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-cq9ae9h4jmkThBmFfPeE7N1J0UtwbIcA8LoLG8xU.png"><ol start="10"><li> Finally,  run </li></ol>yarn start<h3>Step 2: How to install Redux Toolkit and React Redux</h3>yarn add @reduxjs/toolkit react-redux<h3>Step 3: How to create a Redux store</h3><ol><li>Create a new directory named redux to contain Redux related files. Inside redux directory, create a new file called store.ts</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-BbDZsu7SC4nF7Uh5MzjUNWeXVbMSN0mTguW7XuwV.png"><ol start="2"><li>Create a new file blog.reducer.ts</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-JnjyPpDt4THnMZi5kfOYxc0KrWDYVBvYjlv7QPMg.png"><ol start="3"><li>Open index.tsx add store into Provider</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-IEqgGian83IOtjjDh7raYpqshlOoQ7tPX1IAW5St.png">Then open Redux DevTool to see data tree<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-zUKQ8Wq3mm9TLYuqEl1cuEUcsRjtgR1j3mXk9bVv.png"><ol start="4"><li>Render blog data into UI</li></ol>Create blog components into components and pages directory<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-IpKXHhtNR5zMf7rRkt0FQIjRR2zFowaXaaKWVpf0.png">Then import Blog component into App.tsx<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-tOv5gMdqOOh84bXqxMZesGnrVpzDNTsvrNLW4pfN.png">Use useSelector to get blog data from store<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-UPZvDpfeQe6bZqMoxyIZqpq0uOvW4Yh3HVSiE3lt.png"><h3>Step 4: How to use with createAction</h3><ul><li>createAction: It’s a helper function  for define a Redux action type and creator</li></ul>function createAction(type, prepareAction?)<ol><li>Open blog.reducer.ts file and create action</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-D0r6pfKYrhSjnlknZpzRw0sUyZ0tansSYQnNx8Km.png"><ol start="2"><li>Open CreateBlog.tsx file to dispatch action</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-kLbKyLnx35D2Q8O2nSmzbBGGtQIDYcYE8jG04ylu.png"><ol start="3"><li>Open BlogList.tsx file dispatch action</li></ol><img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-hTpH42k0Iqce6o9OcdoxE7lmoRMttYtz0nM95Qlr.png"><h3>Step5:  How to use with createSlice </h3><ul><li>createSlice: It’s a function that deals with everything needed for each slice, as you have readed createAction and createReducer above. It is accessible within the scope of the specific slice function.</li><li>createSlice contains:</li><li>name: A parameter that will be the prefix for all of action types</li><li>initialState: The initial values for reducer</li><li>reducers: This is an object in which the keys become action type strings, and the corresponding values are functions acting as reducers. These reducers will be executed when the associated action type is dispatched.</li></ul>Rename blog.reducer.ts to blog.slice.ts, convert createAction and createReducer  to createSlice<img src="https://api.careers.saigontechnology.com/storage/ck-editor/CKEDITOR-HDo0xC3U4jTIfpfgpY8PZRFUTWi69wK39BnRm1Ox.png">This application is not integrated with an API. If the application requires APIs integration, I suggest that you should research more about creating createAsyncThunk and RTK Query. Remember that this is a basic example, and as your application grows, you can continue to add more slices, actions, and components to your Redux store.Show source demo:I will show you the small react application using Redux Toolkit to manage state.<h1>III. Conclusion:</h1>Redux Toolkit is a powerful tool. It streamlines the process of setting  Redux, reduces boilerplate code, and provides clear structure for managing actions, reducers and selectors. The integration of Immer for immutable state updates simplifies complex state modifications, making our code more readable and maintainable.Now, should we use Redux Toolkit for our application?. Based on my experience, I strongly recommend it. Because Redux Toolkit addresses many of the pain points when developers working with Redux. It helps developers make the stage management process smoother and more enjoyable. Incase that you’re starting a new project or refactoring an existing one, Redux Toolkit can save your time and effort, allowing you to focus on building features rather than wrestling with Redux setup.So, go ahead, give it a try and watch your Redux become clearer, more manageable, and ultimately more enjoyable to work with.Happy coding!</body></html>

As you may already know, Redux is a state container for Javascript apps. Have you ever had the chance to use Redux? If so, you might have heard that Redux can sometimes be verbose and challenging to work with. Let’s explore how Redux Toolkit addresses these concerns.

Redux Toolkit

Related articles