1:HL["/_next/static/media/2d141e1a38819612-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
2:HL["/_next/static/css/cf073754662ee1dd.css","style",{"crossOrigin":""}]
0:["PKb518kvGJ1fSv37ZR9-f",[[["",{"children":["blog",{"children":[["slug","redux-toolkit","d"],{"children":["__PAGE__?{\"slug\":\"redux-toolkit\"}",{}]}]}]},"$undefined","$undefined",true],"$L3",[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/cf073754662ee1dd.css","precedence":"next","crossOrigin":""}]],"$L4"]]]]
5:I[7221,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"ThemeProvider"]
6:I[2920,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"Header"]
7:I[6899,[],""]
8:I[345,[],""]
9:I[9311,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
c:I[9328,["311","static/chunks/311-ece9a4947c63cbe4.js","965","static/chunks/965-704ef81d34001ffc.js","45","static/chunks/45-5cd7c451ab04a44f.js","185","static/chunks/app/layout-c9339678b85bd69a.js"],"GoogleAnalytics"]
d:I[5097,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
4:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Redux Toolkit - Better way of writing Redux | Adarsha Acharya"}],["$","meta","2",{"name":"description","content":"Learn how to use Redux toolkit - next generation tools for building the apps with react-redux."}],["$","meta","3",{"name":"viewport","content":"width=device-width, initial-scale=1"}],["$","meta","4",{"name":"robots","content":"index, follow"}],["$","meta","5",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","6",{"property":"og:title","content":"Redux Toolkit - Better way of writing Redux"}],["$","meta","7",{"property":"og:description","content":"Learn how to use Redux toolkit - next generation tools for building the apps with react-redux."}],["$","meta","8",{"property":"og:url","content":"https://adarsha.dev/blog/redux-toolkit"}],["$","meta","9",{"property":"og:site_name","content":"Adarsha Acharya"}],["$","meta","10",{"property":"og:locale","content":"en_US"}],["$","meta","11",{"property":"og:image","content":"https://adarsha.dev/og?title=Redux%20Toolkit%20-%20Better%20way%20of%20writing%20Redux"}],["$","meta","12",{"property":"og:image:width","content":"1200"}],["$","meta","13",{"property":"og:image:height","content":"630"}],["$","meta","14",{"property":"og:image:alt","content":"Redux Toolkit - Better way of writing Redux"}],["$","meta","15",{"property":"og:type","content":"article"}],["$","meta","16",{"property":"article:published_time","content":"2020-11-20\r"}],["$","meta","17",{"property":"article:author","content":"Adarsha Acharya"}],["$","meta","18",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","19",{"name":"twitter:title","content":"Redux Toolkit - Better way of writing Redux"}],["$","meta","20",{"name":"twitter:description","content":"Learn how to use Redux toolkit - next generation tools for building the apps with react-redux."}],["$","meta","21",{"name":"twitter:image","content":"https://adarsha.dev/og?title=Redux%20Toolkit%20-%20Better%20way%20of%20writing%20Redux"}],["$","meta","22",{"name":"next-size-adjust"}]]
3:[null,["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":[[["$","link",null,{"rel":"apple-touch-icon","sizes":"76x76","href":"/_static/favicons/apple-touch-icon.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"32x32","href":"/_static/favicons/favicon-32x32.png"}],["$","link",null,{"rel":"icon","type":"image/png","sizes":"16x16","href":"/_static/favicons/favicon-16x16.png"}],["$","link",null,{"rel":"manifest","href":"/_static/favicons/site.webmanifest"}],["$","link",null,{"rel":"mask-icon","href":"/_static/favicons/safari-pinned-tab.svg","color":"#5bbad5"}],["$","meta",null,{"name":"msapplication-TileColor","content":"#000000"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: light)","content":"#fff"}],["$","meta",null,{"name":"theme-color","media":"(prefers-color-scheme: dark)","content":"#000"}],["$","link",null,{"rel":"alternate","type":"application/rss+xml","href":"/feed.xml"}],["$","meta",null,{"content":"width=device-width, initial-scale=1","name":"viewport"}],["$","meta",null,{"name":"google-site-verification","content":"br9AjaAyJgS4OVigpXtHmm2DwdzuzMqzpK4G77lD2TY"}]],["$","body",null,{"className":"mx-auto min-h-screen max-w-3xl antialiased dark:bg-zinc-950 dark:text-gray-100 __className_0aa4ae","children":[["$","$L5",null,{"attribute":"class","defaultTheme":"dark","enableSystem":true,"disableTransitionOnChange":true,"children":[["$","main",null,{"className":"mx-4  px-2 md:px-0 lg:mx-auto flex flex-col justify-between min-h-screen","children":[["$","$L6",null,{}],["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":["$","div",null,{"className":"flex flex-col items-start justify-start md:flex-row md:items-center md:justify-center md:space-x-6","children":[["$","div",null,{"className":"space-x-2 pb-8 pt-6 md:space-y-5","children":["$","h1",null,{"className":"text-6xl font-extrabold leading-9 tracking-tight  md:border-r-2 md:px-6 md:text-8xl md:leading-14","children":"404"}]}],["$","div",null,{"className":"max-w-md","children":[["$","p",null,{"className":"mb-4 text-xl font-bold leading-normal md:text-2xl","children":"Sorry we couldn't find this page."}],["$","$L9",null,{"href":"/","className":"underline","children":"Back to homepage"}]]}]]}],"notFoundStyles":[],"childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$","$L7",null,{"parallelRouterKey":"children","segmentPath":["children","blog","children",["slug","redux-toolkit","d"],"children"],"loading":"$undefined","loadingStyles":"$undefined","hasLoading":false,"error":"$undefined","errorStyles":"$undefined","template":["$","$L8",null,{}],"templateStyles":"$undefined","notFound":"$undefined","notFoundStyles":"$undefined","childProp":{"current":["$La","$Lb",null],"segment":"__PAGE__?{\"slug\":\"redux-toolkit\"}"},"styles":[]}],"segment":["slug","redux-toolkit","d"]},"styles":[]}],"segment":"blog"},"styles":[]}],["$","footer",null,{"className":"flex justify-center align-center pt-10 pb-5 h-20px","children":["$","p",null,{"className":"text-gray-500  dark:text-gray-400 text-sm","children":["© ",2024," ",["$","a",null,{"href":"https://x.com/adarsha_ach","target":"_blank","rel":"noopener noreferrer","children":"Adarsha Acharya."}],"  All rights reserved."]}]}]]}],null]}],["$","$Lc",null,{"gaId":"$undefined"}],["$","$Ld",null,{"async":true,"src":"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-undefined","crossOrigin":"anonymous","strategy":"afterInteractive"}]]}]]}],null]
e:I[3364,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],""]
f:I[419,["311","static/chunks/311-ece9a4947c63cbe4.js","900","static/chunks/900-5fb194ef90f0bbe9.js","965","static/chunks/965-704ef81d34001ffc.js","308","static/chunks/app/blog/%5Bslug%5D/page-79b4219c250c2fa1.js"],"BlogComments"]
b:["$","section",null,{"children":[["$","h1",null,{"className":"text-2xl font-bold tracking-tighter","children":["$","$Le",null,{"children":"Redux Toolkit - Better way of writing Redux"}]}],["$","div",null,{"className":"mb-8 mt-2 flex items-center justify-between text-sm text-neutral-600 dark:text-neutral-400","children":["$","p",null,{"children":["November 20, 2020"," - ","7 min read"]}]}],[["$","article",null,{"className":"prose prose-neutral dark:prose-invert prose-quoteless  max-w-none","children":[["$","p",null,{"children":"I've been using Redux for managing and updating the global state in my React apps for a while. Redux makes it way easier to manage the gobal state and automatically implements complex performance optimizations, so that your own component only re-renders when the data it needs has actually changed ; the major complaint about the React-Redux is **\r\nboilerplate**. 🍽️"}],"\n",["$","p",null,{"children":"From configuring store to configuring with redux dev tools and maintaining actions, dispatch and reducers is quite hectic."}],"\n",["$","p",null,{"children":"To overcome these problems we might choose two solutions :"}],"\n",["$","p",null,{"children":["$","strong",null,{"children":"1. Stop using REDUX !! ⚠️"}]}],"\n",["$","p",null,{"children":["Yes ! you might not even need Redux . There is inbuild Context API with React where we can basically inject the state data into the different components. Honestly, most of the simpler apps doesn't even need redux. You can use libraries like ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://react-query.tanstack.com/","children":"react-query"}]," for caching data with Context for passing data among components."]}],"\n",["$","p",null,{"children":["$","strong",null,{"children":"2. Use Redux Toolkit(RTK):"}]}],"\n",["$","p",null,{"children":"Redux toolkit is the official, opinionated, batteries-included toolset for efficient Redux development."}],"\n",["$","p",null,{"children":"Redux Toolkit was originally created to help address three common concerns about Redux:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"\"Configuring a Redux store is too complicated\""}],"\n",["$","li",null,{"children":"\"I have to add a lot of packages to get Redux to do anything useful\""}],"\n",["$","li",null,{"children":"\"Redux requires too much boilerplate code\""}],"\n"]}],"\n",["$","p",null,{"children":"It includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more. Also, it follows the DUCK 🦆 pattern which has way less of the boiler-plate code."}],"\n",["$","div",null,{"className":"mb-8 flex items-center rounded border border-neutral-200 bg-neutral-50 p-1 px-4 py-3 text-sm text-neutral-900 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100","children":[["$","div",null,{"className":"mr-4 flex w-4 items-center","children":"🧠"}],["$","div",null,{"className":"callout w-full","children":["$","p",null,{"children":"Redux addons are builtin like Redux DevTools Extension & Redux Thunk in RTK.\r\n🤯🤯"}]}]]}],"\n",["$","p",null,{"children":"Before heading towards the code part you must have the basic knowledge of Redux terminologies like :"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"store"}],"\n",["$","li",null,{"children":"actions"}],"\n",["$","li",null,{"children":"reducer"}],"\n",["$","li",null,{"children":"Provider component"}],"\n"]}],"\n",["$","p",null,{"children":["If you haven't already checkout the latest ",["$","a",null,{"target":"_blank","rel":"noopener noreferrer","href":"https://redux-toolkit.js.org/introduction/quick-start","children":"basic tutorial"}]," section in React-Redux docs. They have recently updated it and make fantastic tutorials for getting started with redux."]}],"\n",["$","h3",null,{"id":"installation","children":[["$","a",null,{"className":"anchor","href":"#installation","children":["$","span",null,{"className":"icon icon-link"}]}],"Installation"]}],"\n",["$","p",null,{"children":"Start with the official Redux+JS template for Create React App, which takes advantage of React Redux's integration with React components."}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#61AFEF"},"children":"npx"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"create-react-app"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"my-app"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"--template"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"redux"}]]}]}]}]}],"\n",["$","p",null,{"children":["$","em",null,{"children":"or,"}]}],"\n",["$","p",null,{"children":"You can add the following packages in existing React application."}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"bash","data-theme":"default","children":["$","code",null,{"data-language":"bash","data-theme":"default","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"yarn"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"add"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"redux"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"react-redux"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"@reduxjs/toolkit"}]]}]}]}]}],"\n",["$","p",null,{"children":"Here we are going the visualize the basic todo app and demonostrate the redux part of it."}],"\n",["$","h3",null,{"id":"configurestore","children":[["$","a",null,{"className":"anchor","href":"#configurestore","children":["$","span",null,{"className":"icon icon-link"}]}],"configureStore()"]}],"\n",["$","p",null,{"children":["This API wraps ",["$","code",null,{"children":"createStore"}]," to provide simplified configuration options and good defaults. It can automatically combine your slice reducers, adds whatever Redux middleware you supply, includes redux-thunk by default, and enables use of the ",["$","code",null,{"children":"Redux DevTools Extension"}],". Yep ! you heard it right, it configures Redux dev tools out of box."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"jsx","data-theme":"default","children":["$","code",null,{"data-language":"jsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"configureStore"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"@reduxjs/toolkit\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"todoReducer"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"../slices/todoSlice\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"configureStore"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"reducer"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"todoReducer"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"});"}]}]]}]}]}],"\n",["$","p",null,{"children":["Here we're importing ",["$","code",null,{"children":"configureStore()"}]," then\r\npass the ",["$","code",null,{"children":"todoReducer"}]," into the root reducer and configure root reducer to store. We need to call ",["$","code",null,{"children":"state.todos"}]," to access all the values in todos."]}],"\n",["$","h3",null,{"id":"createslice","children":[["$","a",null,{"className":"anchor","href":"#createslice","children":["$","span",null,{"className":"icon icon-link"}]}],"createSlice()"]}],"\n",["$","p",null,{"children":[["$","code",null,{"children":"creatSlice()"}]," is basically collection of Redux reducer logic and actions for single feature in your app. It automatically creates the action types strings, so no action types need to be created for reducers."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"jsx","data-theme":"default","children":["$","code",null,{"data-language":"jsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// todoSlice.js"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"createSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"@reduxjs/toolkit\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"createSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"name"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"todos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"initialState"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"todoList"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": [],"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"reducers"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"addTodo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {},"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"});"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"addTodo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"actions"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"reducer"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}]]}]}]}],"\n",["$","p",null,{"children":"It basically takes three things:"}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"name : A string name for this slice of state. Generated action type constants will use this as a prefix."}],"\n",["$","li",null,{"children":"initial State : set the todolist to an empty array"}],"\n",["$","li",null,{"children":"reducers object"}],"\n"]}],"\n",["$","p",null,{"children":"Finally we export the actions and reducer."}],"\n",["$","h3",null,{"id":"addtodo-reducer","children":[["$","a",null,{"className":"anchor","href":"#addtodo-reducer","children":["$","span",null,{"className":"icon icon-link"}]}],"AddTodo Reducer"]}],"\n",["$","p",null,{"children":"Basically, it takes the state, action and push the payload into the state."}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"jsx","data-theme":"default","children":["$","code",null,{"data-language":"jsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"addTodo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"reducer"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": ("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"action"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoList"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"push"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"action"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"payload"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    },"}]}],"\n",["$","span",null,{"data-line":"","children":" "}]]}]}]}],"\n",["$","p",null,{"children":["Previously, what we used to do is not mutating the state cuz' state in redux is immutable.\r\nBut ",["$","code",null,{"children":"Redux Toolkit"}]," uses ",["$","code",null,{"children":"Immer"}]," under the hood so we can directly mutate the data. So, here we are directly pushing the data from payload in the todolist."]}],"\n",["$","h3",null,{"id":"usedispatch","children":[["$","a",null,{"className":"anchor","href":"#usedispatch","children":["$","span",null,{"className":"icon icon-link"}]}],"useDispatch()"]}],"\n",["$","p",null,{"children":["When we call the data in out component we use the hook ",["$","code",null,{"children":"useDispatch()"}],"."]}],"\n",["$","p",null,{"children":"I'm just showing the sample code here how to use it."}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"jsx","data-theme":"default","children":["$","code",null,{"data-language":"jsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// AddTodo Component"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"dispatch"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"useDispatch"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"addTodo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"../../redux/slices/todoSlice\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"handleSubmit"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"dispatch"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"addTodo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#E06C75"},"children":"value"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"));"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"};"}]}]]}]}]}],"\n",["$","p",null,{"children":["Here we are using ",["$","code",null,{"children":"useDispatch()"}]," hook to dispatch the addTodo action."]}],"\n",["$","p",null,{"children":"Now, we have added the Todo in the state successfully. 🕺"}],"\n",["$","h3",null,{"id":"add-other-fields-to-payload","children":[["$","a",null,{"className":"anchor","href":"#add-other-fields-to-payload","children":["$","span",null,{"className":"icon icon-link"}]}],"Add other fields to payload"]}],"\n",["$","p",null,{"children":["In react if we want to keep the list sync with the state, then we have to add the key to each list. For that we have to add the ",["$","code",null,{"children":"prepare callback"}],"."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"jsx","data-theme":"default","children":["$","code",null,{"data-language":"jsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// todoSlice.js"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"createSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"nanoid"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"@reduxjs/toolkit\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"createSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"name"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"todos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"initialState"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"todoList"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": [],"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"reducers"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"addTodo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"reducer"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": ("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"action"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoList"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"push"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"action"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"payload"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"prepare"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"value"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"payload"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"            "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"key"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"nanoid"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"(),"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"            "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"value"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"value"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"          },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"        };"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"});"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"addTodo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"actions"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"reducer"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}]]}]}]}],"\n",["$","p",null,{"children":["Import ",["$","code",null,{"children":"nanoid()"}]," from redux toolkit and add the prepare callback where we pass the key as ",["$","code",null,{"children":"nanoid()"}]," and ",["$","code",null,{"children":"value"}]," as todo-value."]}],"\n",["$","h3",null,{"id":"useselector","children":[["$","a",null,{"className":"anchor","href":"#useselector","children":["$","span",null,{"className":"icon icon-link"}]}],"useSelector()"]}],"\n",["$","p",null,{"children":["If you are familiar with redux hooks then ",["$","code",null,{"children":"useSelector()"}]," hooks basically selects the state from store and load it into the component."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"jsx","data-theme":"default","children":["$","code",null,{"data-language":"jsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// TodoList component"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"useSelector"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"react-redux\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoListdata"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"useSelector"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"(("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"todoList"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"//... map the todoListdata"}]}]]}]}]}],"\n",["$","h2",null,{"id":"fetch-data-from-an-api","children":[["$","a",null,{"className":"anchor","href":"#fetch-data-from-an-api","children":["$","span",null,{"className":"icon icon-link"}]}],"Fetch Data from an Api"]}],"\n",["$","p",null,{"children":["Previously, we have to use the middlewares like ",["$","code",null,{"children":"redux-thunk"}]," or ",["$","code",null,{"children":"redux-saga"}]," for fetching the data from external api. Redux toolkit simplifies it by using the built in ",["$","code",null,{"children":"redux-thunk"}]," unde the hood and using ",["$","code",null,{"children":"createAsyncThunk"}]," function."]}],"\n",["$","p",null,{"children":[["$","code",null,{"children":"createAsyncThunk"}]," is a function that accepts a Redux action type string and a callback function that should return a promise. It generates promise lifecycle action types based on the action type prefix that you pass in, and returns a thunk action creator that will run the promise callback and dispatch the lifecycle actions based on the returned promise."]}],"\n",["$","p",null,{"children":[["$","code",null,{"children":"createAsyncThunk"}]," creates three types of actions automatically:"]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":"pending ⏳"}],"\n",["$","li",null,{"children":"fulfilled ✅"}],"\n",["$","li",null,{"children":"rejected ❌"}],"\n"]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"jsx","data-theme":"default","children":["$","code",null,{"data-language":"jsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// todoSlice.js"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"createSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"nanoid"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"createAsyncThunk"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"@reduxjs/toolkit\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"axios"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"axios\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"fetchTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"createAsyncThunk"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"todos/fetchTodos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"data"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"axios"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"get"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"https://jsonplaceholder.typicode.com/todos/\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  );"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"data"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"});"}]}]]}]}]}],"\n",["$","p",null,{"children":["Here we use ",["$","code",null,{"children":"Axios"}]," to fetch the data and ",["$","code",null,{"children":"createAsyncThunk"}],". ",["$","code",null,{"children":"createAsyncThunk"}]," is taking two params :"]}],"\n",["$","ul",null,{"children":["\n",["$","li",null,{"children":[["$","strong",null,{"children":"name of action type"}]," : ",["$","code",null,{"children":"'todos/fetchTodos'"}]," which appends the three action types (pending, fullfilled & rejected)."]}],"\n",["$","li",null,{"children":[["$","strong",null,{"children":"callback function"}]," which does the async actions and returns the todos data."]}],"\n"]}],"\n",["$","h3",null,{"id":"adding-status-and-error-to-initial-state","children":[["$","a",null,{"className":"anchor","href":"#adding-status-and-error-to-initial-state","children":["$","span",null,{"className":"icon icon-link"}]}],"Adding Status and Error to Initial State"]}],"\n",["$","p",null,{"children":["We add two ",["$","code",null,{"children":"status"}]," state and ",["$","code",null,{"children":"error"}]," to the initial state to check if the action is idle and if there is any error in result."]}],"\n",["$","div",null,{"data-rehype-pretty-code-fragment":"","children":["$","pre",null,{"data-language":"jsx","data-theme":"default","children":["$","code",null,{"data-language":"jsx","data-theme":"default","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#7F848E","fontStyle":"italic"},"children":"// todoSlice.js"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"createSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"createAsyncThunk"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"@reduxjs/toolkit\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"import"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"axios"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"from"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"axios\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"fetchTodos"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"createAsyncThunk"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"todos/fetchTodos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"async"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" () "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"response"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"await"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"axios"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"get"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"https://jsonplaceholder.typicode.com/todos/\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  );"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"return"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"response"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"data"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"todoList"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"});"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"createSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"({"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"name"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"todos\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"initialState"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"todoList"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": [],"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"status"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"idle\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"error"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": "}],["$","span",null,{"style":{"color":"#D19A66"},"children":"null"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"reducers"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {},"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  "}],["$","span",null,{"style":{"color":"#E06C75"},"children":"extraReducers"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":": {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    ["}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"fetchTodos"}],["$","span",null,{"style":{"color":"#E06C75"},"children":".pending"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"]: ("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"action"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"status"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"loading\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    ["}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"fetchTodos"}],["$","span",null,{"style":{"color":"#E06C75"},"children":".fulfilled"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"]: ("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"action"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"status"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"succeeded\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoList"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#61AFEF"},"children":"push"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"(..."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"action"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"payload"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":");"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    ["}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"fetchTodos"}],["$","span",null,{"style":{"color":"#E06C75"},"children":".rejected"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"]: ("}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":", "}],["$","span",null,{"style":{"color":"#E06C75","fontStyle":"italic"},"children":"action"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":") "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"=>"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"status"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#98C379"},"children":"\"failed\""}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#ABB2BF"},"children":"      "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"state"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"error"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"action"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"error"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"message"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"    },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"  },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#ABB2BF"},"children":"});"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"const"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" { "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"addTodo"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" } "}],["$","span",null,{"style":{"color":"#56B6C2"},"children":"="}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"actions"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#C678DD"},"children":"export"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#C678DD"},"children":"default"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":" "}],["$","span",null,{"style":{"color":"#E5C07B"},"children":"todoSlice"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":"."}],["$","span",null,{"style":{"color":"#E06C75"},"children":"reducer"}],["$","span",null,{"style":{"color":"#ABB2BF"},"children":";"}]]}]]}]}]}],"\n",["$","p",null,{"children":["Create async thunk is creating its own actions we need extraReducers as fourth parameter in ",["$","code",null,{"children":"createSlice()"}]," which can take those actions and update the state correspondigly. It basically check the status of the state and map the status and error in the state accordingly. If the data is fetched successfully, then push it into todolist."]}],"\n",["$","p",null,{"children":"Now we can check the status of data and map the data in the corresponding component."}],"\n",["$","p",null,{"children":"That's it ! 👋"}],"\n",["$","p",null,{"children":"Tbh, Redux toolkit seems a little bit confusing at first but once you get hands on it it will reduce a lot of boiler plate in your application."}]]}],["$","$Lf",null,{}]]]}]
a:null