React Redux Thunk Middleware in Redux Toolkit for Async Actions with Axios

[@rodinCodin]

Thanks for your work, Mr. Gray! Im building out front end for one of my bootcamp projects and this is hugely helpful in navigating complex RTK environment!

[@DaveGrayTeachesCode]

Very welcome!

[@shineLouisShine]

Thank you, Dave. It seems like one thing seperates this video and this entire Redux series from perfection: The absence of Redux Saga tutorial. If it is not too late to plug in another chapter - that will be more than welcome :) (...As well as your insights about the newRedux core 5.0, React-Redux 9.0, Reselect 5.0 {which I know totally nothing of}, and Redux Thunk 3.0....)

[@Kasiux]

This is insane! How can you make something that used to be just html files into this?! I mean... It's great, but....

[@spondoolie6450]

I was having problems where my API for posts was being called twice and giving me 200 posts (100 unique). I disabled strict mode and it solved the problem. I don't know if that was the main culprit or just a bandaid, but after watching this video 3 times to verify it's the only thing I could think of.

[@DaveGrayTeachesCode]

Yes, I made a video about this React 18 change: kzbin.info/www/bejne/bmLJko2wpZZrhK8

[@morphine496]

I'm finishing my third app for my portofolio and this has helped me immensely. I love the way this guy explains it and the quality he brings.

[@DaveGrayTeachesCode]

Glad to hear that it helped!

[@Phoenix-hp5rj]

what app did u make

[@sirelee5169]

Highly agree.🎉

[@ОлексійКудряшов]

Thanks a lot for this fantastic explanation of Redux, Dave Gray. Would you please provide some guidance on the following bug: I keep getting every post rendered twice + 2 children with the same key red error.. unable to figure out how to fix this... many thanks))

[@DaveGrayTeachesCode]

Yes, this is due to the new nature of React 18 strict mode. It only uses strict mode in dev mode. You can remove it OR you can replace the concat() call in this code and instead, create a new array with the spread operator.

[@yashpandey350]

Thank you Sir for this great tutorial.😍😍😍😍

[@DaveGrayTeachesCode]

You're welcome!

[@harag9]

Great tutorial, much appreciated, and well explained. Thanks.

[@subhashgn1775]

Thank you for the great tutorial. How do we manage multiple Api calls in single component. Do we have to maintain separate loading, error and succeed variables for each of them or?

[@DaveGrayTeachesCode]

Good question. The API call is issued by the Async Thunk. If you were dispatching more than one thunk or dispatching the same thunk more than once, each thunk would handle its own API call. The extraReducers builder cases in the slice would respond to the thunks separately as well.

[@karlo768]

Thank you so much, I've learned a lot from these videos

[@DaveGrayTeachesCode]

Glad to hear it! 💯🚀

[@wasimdorboz]

you best teacher in the world 😁😁

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@ikurbano]

Hi Dave! Thanks for another great tutorial! I have a question. When you created a new post, you pushed it right away to the array of posts in the state. I think you dicided to go that way because the new post has not been pushed into the database which you get all posts from. Please, correct me if I am wrong. Also, if I am right, if you send (via post method) a new post into the same database which you get all your posts from, you need to dispatch fetchAllPosts again so that the new post show up along with old posts.

[@DaveGrayTeachesCode]

In the extraReducers, the builder.addCase has an addNewPost case. If the promise is fulfilled, the state is updated there. That case responds to the addNewPost async thunk promise status.

[@omi7868]

thank you, Dave Gray. Much appreciated.

[@DaveGrayTeachesCode]

Very welcome!

[@mounis]

Great video Dave, thanks a lot. Is this the last video of Redux series?

[@DaveGrayTeachesCode]

Thank you 🙏 and no, several more to come. Busy week this week. Next one, may arrive next week.

[@alefe238]

I was following along with the video and noticed that my store duplicated the data that comes from the api. Any idea of why this is happening? Incredible video btw

[@DaveGrayTeachesCode]

Thanks! Yes, the duplication is due to React 18 strict mode and the use of concat. This tutorial was created with React 17. Other comments on this as well. Create a new array with the spread operator instead of concat.

[@fabianceballos6263]

Hi Dave, yours tutorials and skills are amazing, I followed this one but for some reason I'm getting twice the posts and then getting the warning of duplicate key. I downloaded the code and copy paste all the components and still happens. I was wondering if it is about react version (react v18 and react-redux v8).

[@DaveGrayTeachesCode]

Thank you for the kind words, Fabian! I think it must be React 18. If you are using strict mode v18 renders twice.

[@moretimeproductions]

Had the problem as well, I solved it by instead of .concat the state.posts with the loadedPosts just do state.posts = loadedPosts

[@DGAINEprod]

From StackOverflow: React StrictMode calls all Effects twice to make sure their cleanup/unmount handlers work as intended. You may need to change your effects accordingly, even if they have an empty dependency list and would normally not unmount before the site is closed. Note, this only happens in Strict + development mode. In a production build, effects will only be called once and when their dependencies change.

[@DGAINEprod]

For additionnal info, consult the React documentation page "Ensuring reusable state"

[@hozayves]

@@moretimeproductions I had the same problem as well for 5 days but now I solved. Thanks a lot buddy

[@triTube70]

Thanks Dave for the great videos, I learned a lot. One question, where do you use the first parameter you pass to the createAsyncThunk() function? The 'post/fetchPosts' string. How does ReduxToolkit use it?

[@DaveGrayTeachesCode]

Great question! The docs say "A string that will be used as the prefix for the generated action types". It is how Redux identifies the action, and you can see this in Redux Devtools. If we dispatch(fetchPosts()), you will see a 'posts/fetchPosts/pending' first and then either similar with fulfilled or rejected. I hope that helps!

[@danieljing9319]

First parameter is a string that will be used to generate additional Redux action type constants, representing the lifecycle of an async request: For example, a type argument of 'users/requestStatus' will generate these action types: pending: 'users/requestStatus/pending' fulfilled: 'users/requestStatus/fulfilled' rejected: 'users/requestStatus/rejected'

[@viditgoel2909]

thanks for this amazing tutorial

[@prakashbanjade4374]

As I refresh the page when I am in SinglePost (say /posts/5), I get error as post not found (my custom error if post not found by id). Why? Other things work fine. I can navigate to specific post as I click on visit post but refreshing this page is causing error. I tried logging out the posts in SinglePost component and it is empty

[@DaveGrayTeachesCode]

This is a single page app (SPA) as all React apps are. When you refresh the page, you lose your client-side state. It's like restarting an app.

[@salihhasan9662]

thank you Dave you are really help me so match

[@DaveGrayTeachesCode]

You're welcome! 💯🚀

[@jp-sc5du]

Hi Dave! I just came from your useAxios video. I'm curious if we can use the useAxios hook with createAsyncThunk and RTK in general? Let's say we put the dispatch call inside useAxios. I really like the reusability of custom hooks. I hope you can give answer as I have just started learning Redux and RTK and would love your guidance. Thank you!

[@DaveGrayTeachesCode]

I know you can use Axios with async thunks and RTK in general. I haven't tried to use a custom useAxios hook with it. The docs have a recipe for an Axios baseQuery: redux-toolkit.js.org/rtk-query/usage/customizing-queries#axios-basequery

[@annusingh4694]

Hi Dave! Thanks for this helpful video. Can you please tell how to paginate the posts which we get after fetchPosts async thunk?

[@DaveGrayTeachesCode]

You're welcome! I have a Pagination tutorial here: kzbin.info/www/bejne/b4vFlaqCarOGq7M

[@annusingh4694]

@@DaveGrayTeachesCode Awesome! Thank you.

[@jowdelgado6865]

So much coding required when redux is used. But this is a good demo video

[@DaveGrayTeachesCode]

Glad it was helpful! 💯

[@danieljing9319]

informative and clear

[@DaveGrayTeachesCode]

Glad to hear that! 💯

[@baselinereviews]

I have a question, but this may be due to react 18 rather than a redux issue. I wanted to have the posts load when the component was loaded, so I moved the dispatch statement to the component itself and put the dispatch statement inside of a useEffect. However, I noticed that when I did this that now the redux action fires twice. Upon some more reading, this is because react now unmounts and remounts the component to help devs look out for remountable components when in dev mode. If I remove the React.strictMode tags, the redux action no longer fires twice. Is there a way to prevent this behavior? Or is this why in your videos you load the state upon loading the application?

[@baselinereviews]

Ok I found an answer to this and it would be, upon the cleanup of a component, if the promise returned from the dispatch() function is not yet fulfilled, call promise.abort() to abort the calling of the thunk, however, I feel that there has to be a better way

[@yashwanthsrinivas]

nice video. thanks

[@zhenyuwang1087]

Hello, Dave, I used my own api, following the third tutorial, and encountered a warning in the PostsSlice.js. It shows the warning about "new Date().toISOString" that I should assign to the action.payload.date. The warning is cannot set the properties of undefined. But I have scrutinised the source code many times and there should be nothing wrong. I guess I got the warning because the version is React 18. I quickly read the reviews under this video, but there seems to be few viewers who came across the same problem.

[@DaveGrayTeachesCode]

Yes, I used React 17 in this video. You can remove strict mode to solve it. Strict mode only applies to dev and not production. Others had duplicate posts caused by the double mount of React 18. You can solve this by changing the concat() call to a new array that uses the spread operator.

[@neelpatel8309]

dave in my code the postlists is rendering twice and it giving duplicate key error is there anyone who faced the same problem ?

[@DaveGrayTeachesCode]

Likely due to React 18 strict mode. Some have solved this (possibly in these comments) by removing the concat() for the store posts and replacing it with a new array using the ... spread operator. This tutorial was made with React 17, but in React 18 strict mode (only applies to dev mode), all components are mounted twice.

[@okumorphilip8087]

Hello Dave, i hope this meets you well, I'm having a little challenge with this chapter, when i fetch my data from the typicode API, each post appears twice, and the top post is always inactive, because, when i use a reaction button on the one on top of the similar post, the reacton count does not respond on the first post, but the reaction counts are updated for the second one and not the first one, when i add a new post, it always goes 2nd, because like i said the first post of the similar post that loads with the app when it starts, looks inactive and doesnt even repond to any clicks

[@DaveGrayTeachesCode]

Getting duplicate posts is likely due to the concat() in the store.js - This tutorial used React 17 but now, with React 18 in dev mode, each component is mounted twice. Instead of concat, create a new array with brackets and spread in the values [...values]

[@okumorphilip8087]

@@DaveGrayTeachesCode Oh, Bless You Dave. Thanks.. When i land my first job, i will buy you Pizza.

[@antonioscaravilli9966]

I will love to watch this video

[@DaveGrayTeachesCode]

Thank you, Antonio! 🙏

[@suryasaini1844]

Hi Dave, Thanks for the tutorial. I have a very sillly question. Why we are not using addNewPost.pending and addNewPost.rejected actions inside extra reducers Similary for fetchUsers we are not using the same pattern.

[@dharmeshgohil9375]

Awesome👍👍👍😊

[@DaveGrayTeachesCode]

Thank you 🙏

[@mohamedyoussef8835]

Awesome Tutorial +++++++++++++++++++++++

[@venkatasuryakiranvudutha3360]

Folks who are struggling : Try to understand the flow. It might be bit tricky initially but just keep repeating yourself .

[@masaratech]

hello

[@DaveGrayTeachesCode]

👋

[@_just_for_fun_4472]

Why are you mutating states directly in reducer (state.posts.push(action.payload)) This is completely wrong.... and you should strictly avoid that according to the three principles of redux

[@DaveGrayTeachesCode]

You must not understand Redux Toolkit which now uses Immer in there. This is the way you are supposed to do it now. Read here: redux-toolkit.js.org/usage/immer-reducers#immutable-updates-with-immer ..these tutorials follow the tutorial in the docs for cross-reference.

[@chrisstucker1813]

Read the documentation first before accusing someone of being wrong. That way you won’t make yourself look stupid.

[@RossPfeiffer]

so the addCase thing is taking a promise i can only assume. hrm. okay

[@samiullahsheikh5015]

13:40 As usual you are producing high quality content which is super awesome. Dave, I am little confuse about dependency array. Can you please explain the following point. I know the use of dependency array in useEffect but still didn't get it what is the purpose of puting dispatch in dependence array? Usually we put something in dependency array whose value change but dispatch itself is a function.

[@DaveGrayTeachesCode]

Good question, Sami. If using strict mode, you will get warnings about not including it in the console. It doesn't bother anything to be there, but I agree that it may not be necessary either. It was presented this way in the docs example I based the tutorial on, so I left it in there.

[@codingispower1816]

In the postsSlice.js I notice that in the fetchPosts.fulfilled addCase, concatenating the loaded posts is making the posts come back twice. Fixed it by changing the line to state.posts = loadedPosts;@@DaveGrayTeachesCode

[@learner8084]

Thanks very much for the video. I'm slowing watching and learning everything you show here. I benefitted greatly from your video. I understand much better now. I have a side question, I find the vertical line marking the block and also the horizontal line on the first line of the block very useful in following your video. May I know what extension or settings that enable this ? Thanks !!!

[@ahmedmusawir]

Awesome stuff! As usual ... quick question, do you think we should include Axios since we have RTK query? Does the RTK query handle caching and everything on its own? I'd appreciate a reply since I'm learning the whole thing from you and there is no better tutorial available on the topic anywhere ... thanx in advance!

[@Kourosh_ey]

That is my question too

[@micharozek3046]

Man you're talking the same as Hershel Greene from the Walking Dead xD Thx for the vid! :)

[@DaveGrayTeachesCode]

I hadn't heard that comparison before! I'm nowhere near that old, but Hershel was great on that show 💯

[@kamelkamatchu8830]

thank you for this great tutorial but if you run this in react 18 will get an 100 warning of two children with same key and also blogs are dublicated in page but in react 17 there is no error

[@DaveGrayTeachesCode]

React 18 has made some changes. One is rendering twice in strict mode. Not sure this would be the cause but thought of that first.

[@moretimeproductions]

Had the problem as well, I solved it by instead of .concat the state.posts with the loadedPosts just do state.posts = loadedPosts

[@kamelkamatchu8830]

@@moretimeproductions thanks for your comment i also solve it with hook useRef

[@moretimeproductions]

@@kamelkamatchu8830 How did you approach that?

[@kamelkamatchu8830]

@@moretimeproductions youtube always delete my comment with link .. and as Mr Dave comment react 18 render two times in strict mode and react team already propose solutions for this

[@solution001]

Could you make an Lit Webcomponents + Redux-Thunk. I use it, and could help if you need it.

[@willyhorizont8672]

Great tutorial Dave thanks, can't wait to see this async thunk with useAxiosPrivate hook you created in the series :)

[@DaveGrayTeachesCode]

They are similar. Our posts state has the posts, a loading state, and an error just like the custom Axios hooks structure. The extraReducers builder cases respond to the promise status returned where we set the state status. Very similar structures!

[@willyhorizont8672]

@@DaveGrayTeachesCode so you mean I can use axios interceptor inside extraReducers builder like that?

[@DaveGrayTeachesCode]

Not inside the builder case, but I did put axios inside the fetchPosts async thunk. It could be intercepted there before returning data.

[@Gerald-uk5up]

great content learnt alot I have a question how do you add a thunk to middleware without getting an error when I do this middleware: [thunk] I get an error

[@darklord11269]

thank you, this video is helpful for me

[@leminhdung1981]

Thanks!

[@DaveGrayTeachesCode]

Thank you for the support!

[@Const-y9q]

I've never seen a tutorial like this. Thank you so much. Dave ☺️

[@DaveGrayTeachesCode]

You're welcome! 🙏 Glad it was helpful!

[@maxwellalexander6474]

¡Gracias!

[@DaveGrayTeachesCode]

Thank you for the support! 💯

[@AbuTaher-vx2oe]

if i follow like your tutorial createAsync thunk error also entered fullfiled

[@fifthscholar]

Where is the middleware there?

[@saquibasghar5152]

Hi Dave at 9:20, you added concat method to post array, when useEffect is called, reactStrict mode will make another GET request and the response will concat with the existing post array with new array, thus post length 200 and every post element is duplicatetd

[@DaveGrayTeachesCode]

You are correct. This tutorial was made with React 17 before strict mode did that. Use the spread operator to create a new array instead.

[@saquibasghar5152]

@@DaveGrayTeachesCode Thanks Dave for your reply, I used the spread operator. Again, thanks for generous contribution in making this kind of tutorial and helping future aspiring react developer in their career.

[@hozayves]

@@saquibasghar5152 Hello friend, I have the same error for duplicated posts, Could you please help me to know how you resolve it.

[@hozayves]

Problem resolved buddy Thanks a lot @DaveGrayTeachesCode , @saquibasghar5152 @saquibasghar5152

[@vickysawant19]

@@hozayves // state.posts = state.posts.concat(loadedPosts) state.posts = [...loadedPosts];

[@yogendra591]

Any idea, do we need to test the createAsyncThunk separately while testing the createSlice in Redux toolkit?

[@DaveGrayTeachesCode]

This may help: stackoverflow.com/questions/67087596/jest-testing-createasyncthunk

[@tzCraig]

Thanks, Dave! You're saving my life here... #codingBootcamp 😰

[@DaveGrayTeachesCode]

Right on!

[@roberainsarmu8135]

I am trouble in getting the source code for code debugging. please can u post github link on description? thank u

[@DaveGrayTeachesCode]

There is a link to the course resources which includes source code in the description. On the course resources page, each chapter of this series is linked to with source code available.

[@lutfisken]

Great video thanks. Still I think when looking in our own application with custom (simple in my opinion) implemenation of Redux (actions in one folder and reducers in one folder), where we are now thinking refactoring to Redux Toolkit, the whole createSlice() syntax seem to quickly get messy and hard read with one huge object as parameter where properties like "reducer" and "prepare", "extraReducers" etc in turn have there curly brackets and object.....Hope you see what I mean, kind of riskt to end up in spaghetti-syntax if not being careful . Still I will look in to it as I understand Redux Toolkit will be the standard way of setting up Redux.

[@jagjens]

Great video Dave, learnt alot from this one!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@nguyenanh-vt4jv]

Thank you Dave, hope you have a video for redux saga

[@DaveGrayTeachesCode]

I don't but I have had a few requests.

[@pripra8240]

Aa

[@cole_mcconnell]

Super useful video, thanks so much this makes it so much clearer to me how to setup the architecture around thunks and async code involved with redux states!

[@DaveGrayTeachesCode]

Glad it helped!

[@Xtapodi27]

What is your color theme please?

[@DaveGrayTeachesCode]

GitHub theme 🚀

[@goodnewsjohn2482]

You've earned a new subscriber

[@DaveGrayTeachesCode]

Welcome aboard!

[@NikhilSharma-rz9jy]

Is it beginner friendly or not ?

[@DaveGrayTeachesCode]

For Redux beginners - not absolute beginners. You should know React first.

[@CarlosSuarez-mc3is]

For some reason my extra reducer is not catching the error. I tested error handling and the case for rejected never gets trigger. Looking at the thunk function, I can see that it does catch the error. I'm not sure what could be wrong here. Could you advise what could be the potential issuel

[@DaveGrayTeachesCode]

I can only guess from here. Compare your code to mine for differences. The source code is available at the course resources link in the description.

[@CarlosSuarez-mc3is]

@@DaveGrayTeachesCode sure, but I also comprare it to the documentation and nothing seems different. I might have added a Middleware km the rootreducer, but how would this change the hook? :O

[@SL4UGHT3R]

13:50 why dispatch is a dependency in useEffect dependency array?

[@DaveGrayTeachesCode]

As recently as React 17, you would receive a warning if it wasn't. It is a function and likely does not change. With React 18 you should not receive a warning if left out.

[@SL4UGHT3R]

@@DaveGrayTeachesCode ok, thanks!!

[@mihirsharma3857]

Thanks Dave, For awesome playlist 🙏

[@mohamedyoussef8835]

Best tutorial on KZbin ... but you should not use try/catch in createAsyncThunk or .addCase(fetchPosts.rejected, will never be called. Just let it throw the error: const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => { const {data} = await axios.get('/posts') return data })

[@DaveGrayTeachesCode]

Thank you for the kind words, Mohamed 🙏 and great catch! My try-catch habit got in the way here. You are correct, and I have updated the source code repos. 💯🚀

[@joaoalegria7578]

Can this be implemented ina Next.js project normally or do I need to use the Next js wrapper?

[@DaveGrayTeachesCode]

I am planning to cover Next.js soon. Next.js is server-side.

[@joaoalegria7578]

@@DaveGrayTeachesCode Awesome! Yeah I know, I'm currently building an application in react next.js and redux tool kit, that's why I asked. lol I've never used next.js and redux tool kit so I'm still pretty green. Just subbed and my notifications are on! Cheers

[@mayanxoni]

One thing worth mentioning at the end of the video is that when the new posts are added one after another, we get the following warning: Warning: Encountered two children with the same key, `101`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted - the behavior is unsupported and could change in a future version.

[@DaveGrayTeachesCode]

Note that this only occurs because the jsonplaceholder website doesn't really add the new posts. I have updated the course resources code to better handle this, but it would not be an issue if not for the jsonplaceholder site behavior.

[@mayanxoni]

@@DaveGrayTeachesCode thanks for the reply! I'll check it out.

[@ema_devolder]

A very above explanation...

[@VietTranIT]

Thanks, appreciate the excellent tutorial

[@DaveGrayTeachesCode]

Glad it was helpful!

[@wzup23]

Dude, thank you for this!

[@ougininja8412]

Amazing video

[@DaveGrayTeachesCode]

Thanks!

[@moretimeproductions]

First of all thanks for this great tutorial. I am having a problem towards the end. When I add the payload in AddPostForm to dispatch(addNewPost({ title, body: content, userId })) I get an error that says "Expected 0 arguments, but got 1.", which is strange, because the action should expect the payload as an argument right? I did the tutorial in TypeScript to practise that, but I don't think that the problem is with that. Do you have any idea, why that is? Also when adding a new post whe should add an id at action.payload.id = nanoid(); or else if you add more than one post, they will all have an id of 101, which will cause problems.

[@moretimeproductions]

Ok, maybe that was TypeScript after all. For anybody, who might have that problem as well, here is how I solved it: We need a payloadCreator. so when we createAsyncThunk for addNewPost, we pass in the "initialPost". This needs a structure, so I set up an interface PostToAdd { title: string; body: string; userId: number; } and then when we pass the initialPost argument, add that type "async(initialPost: PostToAdd). That solved it for me. Thanks again for the great tutorial!

[@DaveGrayTeachesCode]

@@moretimeproductions glad you worked it out! 💯

[@stevereid636]

@@moretimeproductions Thanks! This worked for e as well 👍🏾

[@prince5922]

This series is the most exhaustive Redux tutorial on youtube, thank you so much Dave. There are a few observations that I've had while following and I thought I might share them, at 28:15 inside the onSavePostClicked method the catch block in this case won't work because the unwrap method itself doesn't throw an error, we need to have an async function with await to achieve that functionality. Furthermore at, 5:59 and inside the fetchPosts thunk, inside the catch we are returning err.message; however, this won't work because we need to return a promise from the thunk callback and according to the promise result thunk will create and trigger the appropriate actions. Since this is not a promise thunk doesn't know what to do and it can't create and trigger the reject promise action. These are some of my observations. All in all, 'I'm really loving this series.

[@DaveGrayTeachesCode]

Good discussion! 1) The unwrap method can throw an error. See ( redux.js.org/tutorials/essentials/part-5-async-logic#checking-thunk-results-in-components ) for the same code and a further docs reference here: ( redux-toolkit.js.org/api/createAsyncThunk#unwrapping-result-actions ) ..."The promise returned by the dispatched thunk has an unwrap property which can be called to extract the payload of a fulfilled action _or to throw either the error_ ..." 2) Correct! 💯 This correction is already annotated for the video in the description and appears at 6:22. This is also already corrected in the provided Github source code. Glad you are enjoying the series!

[@prince5922]

@@DaveGrayTeachesCode Thank you so much for responding, your reply made my day. Regarding the first point, the code in the docs, the reference of which you've shared, it has an "await" before the dispatch, but at 28:15 in the video, "await" isn't typed before dispatch, which I think is why I was having trouble catching the error.

[@DaveGrayTeachesCode]

@@prince5922 ah I see! Good catch!

[@razmiqayelyan1497]

Thanks a lot

[@DaveGrayTeachesCode]

You're welcome, Raz! 🙏

[@techcheck3042]

Great tutorial! Thank you!

[@DaveGrayTeachesCode]

Welcome!

[@jkkim6363]

Hi Dave! First of all, really thanks for this amazing tutorial! :) And I followed this one, everything works well. But I have a question, When I add a bunch of new posts, that are more than two post, I found that they all have an id of '101'. so I saw the message "Encountered two children with the same key, `101` in the console. and I also found another related problem, when I clicked the reaction buttons, the buttons' response has a problem too. Could you check these problems? How can I solve this problem? How should I change the code?

[@DaveGrayTeachesCode]

Hello Kris - you can follow the link in the description to the resources for this Redux series and view my source code for lesson 3. Compare to yours for differences.

[@andreyvasilenko2011]

Hi Dave! Thanks for great tutorial. One question. If I update react and react-redux to the current version ("react": "^18.2.0", "react-redux": "^8.0.2"), "posts/fetchPosts/fulfilled" happens twice. How to fix it?

[@DaveGrayTeachesCode]

Quick way: Remove strict mode from the index.js. Your issue only happens because the new React 18 strict mode mounts components twice. This only happens in development mode with strict mode enabled.

[@akhilchandra5935]

Thanks!

[@DaveGrayTeachesCode]

Welcome!

[@muhammadnurali4347]

Hello, thank you for the great tutorial. After you called store.dispatch(fetchUsers()) in index.js, the AddPostForm component can access users state via useSelector, but when i checked the redux global state with redux devtools, there is only posts state. How came AddPostForm component access users state without it being saved in global state ?

[@DaveGrayTeachesCode]

You may want to compare your code to my course resource code for lesson 3 as the users state is being saved. In the index.js, the fetchUsers function is imported from the usersSlice and dispatched with store.dispatch(fetchUsers())

[@dilucsuki8470]

20:40 even tho the canSave looks better it's not as good as it was, since it creates another execution context, would be perfect with just title && content && userId && addRequestStatus==="idle"; :D lovely tutorial + loved the extra POST example

[@DaveGrayTeachesCode]

Thanks!

[@stevemcqueen2887]

You should describe what a Thunk is more. I had to do some additional reading, and I'm watching youtube because I don't like to read 🤣 Apart from that, excellent course again Dave!

[@DaveGrayTeachesCode]

Thank you!

[@iedit1713]

good video.... but my when i fetch from api i have been fetching the same content twice some how?? what might be the possible error here? is the key in PostsExcerpt possible error here? that only happens when i use ordered post...with normal post.map() i am not fetching the multiple data

[@DaveGrayTeachesCode]

If you are using React 18 strict mode, you might experience this. There is an array.concat() in there that doubles the results with the new strict mode behavior.

[@ebukachuqz]

Hi Dave, please can I get your opinion on this? For a real big project which would you work with? Redux with redux thunk or Redux-toolkit?

[@DaveGrayTeachesCode]

Hello - modern Redux is Redux Toolkit. This tutorial shows the using Redux Toolkit to create async thunks. This should meet your needs. As you progress in this series, you will also learn about RTK Query.

[@cuneytdonmez214]

best best best

[@caraxes]

Hi great video. When you have in plan something about redux saga with slice's?

[@DaveGrayTeachesCode]

I need to get through the redux toolkit basics first 🚀

[@DeepakGupta-pz4fx]

@@DaveGrayTeachesCode redux saga using fetch api data implementation

[@MartinPerez-mi1ty]

Thank you so much this was so helpful, greetings from Peru

[@DaveGrayTeachesCode]

You're very welcome! And hello to Peru! 👋

[@iUniverse]

Thank you very much Dave for this tutorial. I have some query though. In the case, fetchPosts.fulfilled, during execution, with this line of code: state.posts = state.posts.concat(loadedPosts) the data is displayed twice hence this warning occured: "react-dom.development.js:86 Warning: Encountered two children with the same key, `1`. Keys should be unique so that...", however, if I changed state.posts = state.posts.concat(loadedPosts) into state.posts = action.payload it displayed okay but I wonder the Time ago and and Reaction also works.

[@DaveGrayTeachesCode]

Due to this tutorial was with React 17 and not React 18's double mount behavior in strict mode. Instead of concat, create a new array with the spread operator. See other comments on this.

[@hosamgnaba3205]

a very fat big like from me man, I really appreciate what you do here ? thank you

[@DaveGrayTeachesCode]

You're welcome, Hosam! 🙏

[@Lotpite]

really easy to undestand, thank for nice explanation

[@DaveGrayTeachesCode]

You are welcome!

[@codegym2306]

Thank you, Dave, your explanation gave me a more insight of async thunk

[@DaveGrayTeachesCode]

Glad it was helpful!

[@rammehar5531]

Yeah, I always love to see your's full of knowledgable contents videos, Thanks Dave!! and please make a series of Typescript, NextJs with Redux Toolkit.

[@DaveGrayTeachesCode]

You're welcome and great requests! Those are on my list!

[@dieuhuyen0812]

Thankyou teacher. The tutorials are very good!

[@DaveGrayTeachesCode]

Glad you like them!

[@DeepakGupta-pz4fx]

Please make use redux saga separate video using

[@DaveGrayTeachesCode]

I will work towards this after I complete the redux toolkit basics 💯

[@hardwired89]

thanks you for advance react js tutorial sir

[@DaveGrayTeachesCode]

You are most welcome! 💯

[@RahulSharma-wh8sq]

Great content really impressive thanks a lot🙏

[@DaveGrayTeachesCode]

You're welcome!

[@빵실한피글렛]

This video is very helpfull for me, thanks a lot!!

[@DaveGrayTeachesCode]

You are welcome!

[@fithamlakfikrie4657]

Thank you for this clear explanation!

[@DaveGrayTeachesCode]

You are welcome!

[@samislam2746]

I have a question, I saw you wrote dispatch inside the useEffect() array at line 17 inside react_redux_toolkit/03_lesson/src/features/posts/PostsList.js ` useEffect(() => { if (postStatus === 'idle') { dispatch(fetchPosts()) } }, [postStatus, dispatch]) ` what does that mean? isn't dispatch a function? how React is going to know that the dispatch function was changed? it doesn't change, it fires. What If I removed that dispatch from here? what are the downsides? And thank you 😁

[@DaveGrayTeachesCode]

No real downsides I can see other than a possible warning in the console. 💯

[@samislam2746]

@@DaveGrayTeachesCode 👍