{"id":55432,"date":"2022-08-26T11:35:25","date_gmt":"2022-08-26T06:05:25","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=55432"},"modified":"2022-09-13T11:37:43","modified_gmt":"2022-09-13T06:07:43","slug":"introduction-to-redux-toolkit","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/introduction-to-redux-toolkit\/","title":{"rendered":"Introduction To Redux Toolkit"},"content":{"rendered":"<p><b>What is Redux ToolKit?<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Redux Toolkit (also known as &#8220;RTK&#8221; for short) is the recommended approach for writing the Redux logic. The <\/span><i><span style=\"font-weight: 400;\">@reduxjs\/toolkit<\/span><\/i><span style=\"font-weight: 400;\"> package wraps around the core redux package, and it contains API methods and common dependencies that are essential for building a Redux app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Redux Toolkit package is intended to be the standard way to write Redux logic<\/span><\/p>\n<p><span style=\"font-weight: 400;\">RTK follows the ducks pattern and combines reducers, actions, and constants in one file called a slice. Each slice will provide an initial state and a reducer function for an object in the store<\/span><\/p>\n<p><em>Redux Toolkit comes pre-bundled with below features:<\/em><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">immer.js : a library\/tool to handle immutability in stores.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">redux : For state management<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Redux-thunk : For async calls<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">reselect :\u00a0 For selecting a slice out of global store<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">automatic support for Redux Dev-tools Extension<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><b>Installation:<\/b><\/p>\n<p><span style=\"font-weight: 400;\"># NPM<\/span><\/p>\n<p><span style=\"font-weight: 400;\">npm install @reduxjs\/toolkit<\/span><\/p>\n<p><span style=\"font-weight: 400;\"># Yarn<\/span><\/p>\n<p><span style=\"font-weight: 400;\">yarn add @reduxjs\/toolkit<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><b>Reason for using Redux toolkit:<\/b><b><br \/>\n<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">A lot lesser boilerplate code is required compared to Redux.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">No need to set up thunk manually as redux-toolkit comes with out of box <\/span><i><span style=\"font-weight: 400;\">createAsyncThunk<\/span><\/i><span style=\"font-weight: 400;\"> which can perform async operations.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Mutability might be considered an advantage or disadvantage, but if you&#8217;re not too used to writing with spread operators, you might love this feature as well. Do straight assignments and let the redux toolkit take care of mutability under the hoods.<\/span><\/li>\n<li style=\"font-weight: 400;\"><i><span style=\"font-weight: 400;\">current<\/span><\/i><span style=\"font-weight: 400;\"> can be used to log your state anywhere in case you want to debug and understand where things are going wrong.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">An example of what a slice looks like:<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-55431 size-full\" src=\"\/blog\/wp-ttn-blog\/uploads\/2022\/08\/Screenshot-2022-08-26-at-3.00.34-PM.png\" alt=\"Redux Toolkit Slice in Action\" width=\"1250\" height=\"904\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2022\/08\/Screenshot-2022-08-26-at-3.00.34-PM.png 1250w, \/blog\/wp-ttn-blog\/uploads\/2022\/08\/Screenshot-2022-08-26-at-3.00.34-PM-300x217.png 300w, \/blog\/wp-ttn-blog\/uploads\/2022\/08\/Screenshot-2022-08-26-at-3.00.34-PM-1024x741.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2022\/08\/Screenshot-2022-08-26-at-3.00.34-PM-768x555.png 768w, \/blog\/wp-ttn-blog\/uploads\/2022\/08\/Screenshot-2022-08-26-at-3.00.34-PM-624x451.png 624w\" sizes=\"(max-width: 1250px) 100vw, 1250px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">As it is visible we have the reducer, and actions all in one place. One interesting thing to note is that we are directly updating the state. <\/span><span style=\"font-weight: 400;\">You might think that is it not the redux best practice to not mutate the state. <\/span><span style=\"font-weight: 400;\">Well, the answer is yes but you do not need to do that yourself. Redux Toolkit contains a library named immer.js which handles it for you internally.<\/span><\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>What is Redux ToolKit? Redux Toolkit (also known as &#8220;RTK&#8221; for short) is the recommended approach for writing the Redux logic. The @reduxjs\/toolkit package wraps around the core redux package, and it contains API methods and common dependencies that are essential for building a Redux app. The Redux Toolkit package is intended to be the [&hellip;]<\/p>\n","protected":false},"author":1475,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":19},"categories":[1772,3038],"tags":[5012],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55432"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1475"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=55432"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55432\/revisions"}],"predecessor-version":[{"id":55463,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55432\/revisions\/55463"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=55432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=55432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=55432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}