I remember once i asked you for a blog app project in one of your videos. Today i got it. Thank you dave. Today i am asking you for some extra things. If you would show that how to create blog posts with images and videos inside the blog then it would be very helpful for me. I am trying to create a real world blog for myself but i didn't find anything helpful yet. Maybe i am lacking finding skills or programming skills. It would be great if you create a video where we can see production level blog app. Thank you so much. Following your channel when you had 4k subscriber. Trying to stay with you and learning from you.
Thank you! There is more to come in this series. My React full course for Beginners also creates a blog project during the course. I appreciate the requests for multimedia posts. I'll keep that in mind! 💯🚀
Dave!! Wow! I have never seen such quality content in a free or paid course. This is awesome! I appreciate the time and quality of these courses. Thank you.
Such an amazing explanation of Redux Toolkit, it's a little difficult because I'm a beginner, but you make it simple, I hope you will continue with these episodes about Redux because it is a very important top. Best regards Dave and best regards from Serbia, you are my favorite RUclipsr! :)
Loving the videos. Well explained and good sample code. I have lessons 1-4 working using NextJs and Typescript, and it has helped mw with React, Redux, Redux Toolkit as well as NextJs and Typescript. The only thing I cannot get to work is at the end of lesson 4, when you navigate to view one post, and then refresh, and the post shows as "Post not found!". I am fetching the posts and users in the root page.tsx, but the State is not being updated to enable the refreshed view post page to see the reloaded posts.
Great tutorial Dave, many thanks for this, though I had to make quite a few tweaks as created my project with TypeScript, but got it all working the way it should. :)
Why is it that if i pass state to the selector it works but if I don't like code in this project I get a "Cannot read properties of undefined" error? Yet redux tools shows the state values are definitely there. So const rotations = useSelector(state => selectRotations(state)) works but const rotations = useSelector(selectRotations()) doesn't. BTW I love your content... Very well put together and easy to follow. I'll buy you a coffee
Hey Dave!! Great work man! Appreciated! one correction in postSlice while fetching all posts, we are doing concat with the existing post which makes duplicate in the list. Please have a look. Thanks for this awesome tutorial. Additionally, convert the userId to Number becaue it's not fetching the user infor properly.
The postSlice had no issue with this in React 17 when the tutorial was made, but yes, now in strict mode (only applies to dev mode), the concat does create duplicate posts in React 18. There was no issue fetching the user info properly, but note that the jsonplaceholder site does not really add new posts, update or remove them. You could run JSON server locally if you need to see the changes. Most of this code is from the official docs tutorial here: redux.js.org/tutorials/essentials/part-1-overview-concepts
Hi Dave, really nice redux tutorial, based on official redux docs 👍 just small note. In our reducers we don't need "postAdded" reducer anymore because we're adding new post with "addNewPost" async thunk, right? :)
Right! We could have removed that from the code already. You can see that we are now importing and dispatching "addNewPost" in AddPostForm.js: github.com/gitdagray/react_redux_toolkit/blob/main/04_lesson/src/features/posts/AddPostForm.js
Thanks for the request! Based on your request, you may be interested in this video: ruclips.net/video/ZMwnjqbW0IA/видео.html and this one: ruclips.net/video/Jm4TbtO8-ko/видео.html
Hi Dave! How are you? Thanks for a new video. I began to learn next js and teacher told me that there are no need to use redux, there is another way. Is it really so? Becouse redux seems hard but wathing your videos is so simple!
DAVE....hanks for your videos, I'm learning a lot... I have a query... when should I use .unwrap() (it is recommended to always use it when using dispatch to force possible errors???) ESPAÑOL: Amigo DAVE gracias por tus videos... estoy aprendiendo mucho..... Tengo una consulta..... cuando debo usar .unwrap() (se recomienda usar siempre cuando use el dispatch para forzar posibles errores???)
when you are mutating existing post when update data is there.....state is not updating as it is giving, you cannot mutate state.....but your are directly updating the posts in builder .add cases..... how?
I know I discuss Immer at some point although I couldn't tell you exactly where I do in this series. Redux Toolkit uses Immer which lets you write code as mutations. Here is a link: redux-toolkit.js.org/usage/immer-reducers#immutable-updates-with-immer
@@DaveGrayTeachesCode i have a question, actually we are making an application.... suppose we get the data from server and put it in store at client side...... in page it requires post data and get data..... so without hitting database for get data after post, i am doing crud operation at client side itself...... so the post data from server, can we directly push to the get data which is present in store? because both are async related data.... if i do like that it is saying proxy data if i get the data after adding post data to get data........
Hi Dave, can you tell me when you start a react+redux project, What kind of directory structure do you usually use? It's too obvious, but does it apply differently for each project? Is there a basic structure?
Breaking the features into a folder structure is the main thing. In this example, that keeps the postsSlice and anything about posts in one location. The users are another feature. Otherwise, a React app structure - which can vary based on preference or on how your dev team structures things.
Hi Dave, I am curious when successful edit the post at 26:46 until 26:48. There are times the old post disappear then updated post show. the question is, How to place loading to hide the old post until the updated post ready? thanks.
As this series moves on to RTK Query, you will see it provides both isLoading and isFetching states which allow you to conditionally render your component while data loading or fetching is happening.
Hello Dave, First thank you for the courses, I have finished nodejs and now I'm learning redux. I have a problem const post = useSelector(state => selectPostById(state, postId)) returns undefined but when I tried to log posts in console const post = useSelector(state => console.log(state.posts.posts)) the posts are there
I was able to find the bug. Forgot to add Number(postId) since useParams returns a string and other problem is export const selectPostById = (state, postId) => { state.posts.posts.find(post => post.id === postId) } forgot to add return
Thank for another great video Dave! but I have ran into an issue, the edit post page when I refresh is throws multiple errors because the selectpostbyid doesnt seem to be returning a valid post anymore, please advise
Refreshing the page takes the application back to the initial state. React applications are single page applications even if React router makes it look otherwise. You must have a persist state strategy if you want to be able to refresh pages.
This tutorials are very helpful. But just one suggestion, pls make the video length shorter otherwise it becomes so much over-whelming by the end of the video.
Thank you! My suggestion - bookmarks / chapters for the video are provided in the description. Just do what you can handle in one sitting. Stop the video and come back when you are ready for more - just like the chapters of a book. 😀
DAVE....hanks for your videos, I'm learning a lot... I have a query... when should I use .unwrap() ??? ((minuto 20:11)) (it is recommended to always use it when using dispatch to force possible errors???) ESPAÑOL: Amigo DAVE gracias por tus videos... estoy aprendiendo mucho..... Tengo una consulta..... cuando debo usar .unwrap() ??? ((minuto 20:11)) (se recomienda usar siempre cuando use el dispatch para forzar posibles errores???)
Not always with dispatch... specifically when we use an Async Thunk that will fulfill or reject a promise. More detail in the docs here: redux-toolkit.js.org/api/createAsyncThunk#unwrapping-result-actions
@@DaveGrayTeachesCode GRACIAS...... acabo de leer la informacion (y dejo aqui en extracto que dice..) En la mayoría de los casos, se prefiere usar la propiedad .unwrap() adjunta, sin embargo, Redux Toolkit también exporta una función unwrapResult que se puede usar para un propósito similar. Using the attached .unwrap() property is preferred in most cases, however Redux Toolkit also exports an unwrapResult function that can be used for a similar purpose:
for some reason i am not being able to navigate back from the edit page and update isnt workingg... and found out i was using onchange in button instead of onclick fkkkkkkk
hello dave, on delete post, why do we have to do filtering on the builder to make sure the post state does not contain deleted posts? didn't we already delete the post via axios, and didn't the post get automatically deleted? if that's the case, why don't we dispatch my post id to do filtering without using axios.. Sorry, Dave, because I don't really understand Axios.
Answer to your first question "why": You want to keep your app state in sync with the server state. We didn't refetch all of the posts. We simply request the server delete the post and then we do the same for local state. Answer to second question "didn't we": We did delete it with an axios request. Yes, it should be deleted although this example is using a fake API service - jsonplaceholder - that doesn't really delete their example data. And not sure I follow the last "if that's the case" question because we must use axios to reach out to the server.
Ready finished the video thank you very much... I HOPE you continue with this REDUX TOOLKIT series and we can see interactions with localstore, login, token, work with real node api and mongodb database hahahaha some ideas... thanks again Español: Listo termine el video muchas gracias.... OJALA continues con esta serie de REDUX TOOLKIT y podamos ver interacciones con localstore, login, token, trabajar con api real node y base de dato mongodb jaajajaja algunas ideas.... nuevamente gracias
You can import JSON files and use them that way. Or you could set up something like JSON Server with will respond as an API with JSON files: www.npmjs.com/package/json-server
Hi! Great tutorial really! I have a question : why if I refresh a single post at localhost:3000/post/1 it says post not found? Why it doesn’r persist? What it could be?
I would just be guessing about what is different in your code. I suggest downloading my source code from the course resources and looking for differences in your code.
@@DaveGrayTeachesCode Thanks! I will do that :) But I was asking because redux state comes undefined after refresh a single post page, I looked on stackoverflaw and saw it was normal in development (right?) Thanks again :)
If you have too many, it is likely an indication you need more than one slice with each being more specific. This is the only syntax I have read about for their organization.
Hi Dave , I am react developer and i want to learn redux toolkits, i don't know anything about backend can I follow along this video series??... For backend API are you providing any application or you are using fake api from web ?? Or i have to create backend API by my own to proceed ??
Hi Dave, I'm loving this series, but I think I found and issue. If I'm not mistaken, the addNewPost reducer looks for the last index in the store of posts, gets the id of that post, then adds one to it before assigning it to the new post? If I pick a post to edit and then save it, when I look in the redux dev tools, the updated post is now located at the end of the array and all posts are re-indexed accordingly. Now if I now create an new post, the id of that updated post is selected by the reducer and 1 is added to it before assigning it to the new post. In all cases but one, this causes a duplicate post.id to be create and cause a duplicate key warning in the PostList mapping.
I think this is discussed in another comment, but this issue is due to the value being returned from the fake API jsonplaceholder. It doesn't really add a new post to the API. Therefore, when you have added more than one - if I remember correctly - it keeps returning the same value for the newly added post and even adding one to it just creates a duplicate. If you set it up with JSON-Server instead for development OR an API returning a real increment, this should not be an issue.
@@DaveGrayTeachesCode Yes, addNewPost takes into account that the id coming back from JSONPlaceholder is wrong and assigns a new one based on the id of last post in the array, however, it seems that updatePost causes the order in the posts array to change placing the updated post in the last post position in stored array.
@@stevereid636 ah I'll take a look. I can't remember if we had already applied the createEntityAdapter by this lesson or not - but eventually, we use the sortComparer function in the entity adapter to sort it all.
Ok, I have re-created this issue. It is still due to the "workaround" for the fake API not providing an actual increment. It comes from the case where addNewPost.fulfilled takes the id of the last post and adds 1 to it. Ideally, the API would provide the correct id and this would be a non-issue. To fix for the fake API, I suggest sorting the state.posts by id before grabbing that value.
Hi Dave I really love the series. However I did suddenly run into a bug i have never seen. One moment my app was working but suddenly it started telling me that: You may need an appropriate loader to handle this file type. My code is identical to yours. Thanks
Can you provide a filename and line number the message refers you to? Also, are you using React 18? This tutorial was made with React 17 and React 18 strict mode is not the same.
@@DaveGrayTeachesCode This is what the terminal is throwing at me: Module parse failed: Unexpected token (108:27) You may need an appropriate loader to handle this file type. | response = _context4.sent; | > if (!(response?.status === 200)) { | _context4.next = 7; | break; I am running react v17. There is definitely something wrong in the parsing stage. If I run your code from github everything is fine. But if I copy it into my on working directory it doesn't. It also happened suddenly. It was working and suddenly after one save it breaks.
Me surgio una duda ... se puede usar : useCallback y useMemo con redux-toolkit? disculpa tanta preguntadera.... pero me urge aprender...... saludos y muchas bendiciones por tu grandioso aporte a la comunidad....
Yes, we are using React so we can absolutely use the built-in React hooks like useCallback and useMemo. That said, this tutorial has not optimized anything yet, and Redux Toolkit has some of its own methods for doing so. I'll be covering those in the next video! 💯🚀
@@DaveGrayTeachesCode Excellent... thanks for answering... I'll be VERY attentive to your next videos... hehehehe I have many more questions about this topic..... but I'll leave them pending to ask them in the next videos..... Español Excelente... gracias por responder... estare MUY atento a tus proximos videos..... jejejeje Tengo muchas mas pregunta sobre este tema ..... pero las dejo pendiente para realizarlas en los proximos videos.....
Hi Dave, I am trying to solve the same issue we had with reloading the singlePostPage. If I navigate to post/edit/20, or just refresh, all the details disappear from the form inputs. I seems like the Redux state is loading slower than the local state, so const post, is empty when the page loads. I try to fix this, by setting the new state when the PostsStatus = succeeded, but then I endup in a invinite loop... Can't get my head around why. Is changing the state, automatically refreshing the information on the page? And how can I work around this? What is the easy solution
It just came to me! Solved it myself. Just retrieve the postsStatus and if it's set to Succeeded, show the page. And on each input form, use a ternary operator with: { title === undefined ? post.title : title }
There’s another way to solve this. Set the states to an empty string and the values of the form to be something like title ? : ‘ ‘ Set up a useEffect with the post variable as a dependancy then inside the use effect set the title/content/userId to post.title etc. The issue is that the use selector doesn’t retrieve the post data fast enough and causes weird behaviour. By adding the post as a use effect dependency, whenever the post changes and is filled with the post data, it will re-render with the updated states and the form will display the values!
Hello Dave, I think there is a bug, in the edit post, if I change the author name, it doesn't reflect the new author name, instead, it displays an unknown author name.
Good catch! The e.target.value in onAuthorChanged in the EditPostForm component needs to be converted to a number. It is currently saving a string like "2" for example instead of just 2. Here is the fix: const onAuthorChanged = e => setUserId(Number(e.target.value)) - I will update the repo!
I'll never make everyone happy. It's advanced and I would have more complaints about watching me type everything out. Speed it up, slow it down, do your own thing. It's free.
Dave’s tutorial are based on react redux docs which are in the description. Read them instead of being lazy expecting it all to get spoon fed into you!
I remember once i asked you for a blog app project in one of your videos. Today i got it. Thank you dave. Today i am asking you for some extra things. If you would show that how to create blog posts with images and videos inside the blog then it would be very helpful for me.
I am trying to create a real world blog for myself but i didn't find anything helpful yet. Maybe i am lacking finding skills or programming skills. It would be great if you create a video where we can see production level blog app. Thank you so much. Following your channel when you had 4k subscriber. Trying to stay with you and learning from you.
Thank you! There is more to come in this series. My React full course for Beginners also creates a blog project during the course. I appreciate the requests for multimedia posts. I'll keep that in mind! 💯🚀
Dave!!
Wow! I have never seen such quality content in a free or paid course. This is awesome! I appreciate the time and quality of these courses. Thank you.
You're welcome! 💯🙏
waiting for redux toolkit project for so long. thanks you made it
Happy to help! More to come in this series, too. 🚀
Such an amazing explanation of Redux Toolkit, it's a little difficult because I'm a beginner, but you make it simple, I hope you will continue with these episodes about Redux because it is a very important top. Best regards Dave and best regards from Serbia, you are my favorite RUclipsr! :)
Thank you, Suzana! 💯
finally i have started to understand how redux toolkit works, this was a very helpful tutorial 🤩
You are a damn good tutor i've ever seen in youtube! thanks a lot making such as great series
You're welcome!
Loving the videos. Well explained and good sample code. I have lessons 1-4 working using NextJs and Typescript, and it has helped mw with React, Redux, Redux Toolkit as well as NextJs and Typescript.
The only thing I cannot get to work is at the end of lesson 4, when you navigate to view one post, and then refresh, and the post shows as "Post not found!". I am fetching the posts and users in the root page.tsx, but the State is not being updated to enable the refreshed view post page to see the reloaded posts.
Thanks a lot for such clear Redux turtorial, which I have ever watched.
Great tutorial Dave, many thanks for this, though I had to make quite a few tweaks as created my project with TypeScript, but got it all working the way it should. :)
I just finished this project with typescript. You're awesome. Thank you!
Great job!
Why is it that if i pass state to the selector it works but if I don't like code in this project I get a "Cannot read properties of undefined" error? Yet redux tools shows the state values are definitely there. So const rotations = useSelector(state => selectRotations(state)) works but const rotations = useSelector(selectRotations()) doesn't. BTW I love your content... Very well put together and easy to follow. I'll buy you a coffee
Can use dispatch instead of useEffect at index page when app come first render
Wow man, you really are underrated. You deserve a lot more attention than 35K
Thank you, Luis! 🙏 It keeps growing! 💯🚀
Hey Dave!!
Great work man! Appreciated! one correction in postSlice while fetching all posts, we are doing concat with the existing post which makes duplicate in the list. Please have a look.
Thanks for this awesome tutorial.
Additionally, convert the userId to Number becaue it's not fetching the user infor properly.
The postSlice had no issue with this in React 17 when the tutorial was made, but yes, now in strict mode (only applies to dev mode), the concat does create duplicate posts in React 18. There was no issue fetching the user info properly, but note that the jsonplaceholder site does not really add new posts, update or remove them. You could run JSON server locally if you need to see the changes. Most of this code is from the official docs tutorial here: redux.js.org/tutorials/essentials/part-1-overview-concepts
This is awesome. I only see quality, quality and quality. Waw, you are such a genius. Thank you.
Thank you very much!
Thank you very much for these great content.
Greate content. love how you explain every part.
Thank you!
Hi Dave, really nice redux tutorial, based on official redux docs 👍 just small note. In our reducers we don't need "postAdded" reducer anymore because we're adding new post with "addNewPost" async thunk, right? :)
Right! We could have removed that from the code already. You can see that we are now importing and dispatching "addNewPost" in AddPostForm.js: github.com/gitdagray/react_redux_toolkit/blob/main/04_lesson/src/features/posts/AddPostForm.js
Hi. make a video about test tasks when applying for a job.
Thanks for the request! Based on your request, you may be interested in this video: ruclips.net/video/ZMwnjqbW0IA/видео.html and this one: ruclips.net/video/Jm4TbtO8-ko/видео.html
@@DaveGrayTeachesCode thanks
Hi Dave! How are you?
Thanks for a new video.
I began to learn next js and teacher told me that there are no need to use redux, there is another way.
Is it really so? Becouse redux seems hard but wathing your videos is so simple!
Redux is a global state manager. It is good for large projects, but there are other options.
DAVE....hanks for your videos, I'm learning a lot...
I have a query... when should I use .unwrap() (it is recommended to always use it when using dispatch to force possible errors???)
ESPAÑOL:
Amigo DAVE gracias por tus videos... estoy aprendiendo mucho.....
Tengo una consulta..... cuando debo usar .unwrap() (se recomienda usar siempre cuando use el dispatch para forzar posibles errores???)
when you are mutating existing post when update data is there.....state is not updating as it is giving, you cannot mutate state.....but your are directly updating the posts in builder .add cases..... how?
I know I discuss Immer at some point although I couldn't tell you exactly where I do in this series. Redux Toolkit uses Immer which lets you write code as mutations. Here is a link: redux-toolkit.js.org/usage/immer-reducers#immutable-updates-with-immer
@@DaveGrayTeachesCode i have a question, actually we are making an application.... suppose we get the data from server and put it in store at client side...... in page it requires post data and get data..... so without hitting database for get data after post, i am doing crud operation at client side itself...... so the post data from server, can we directly push to the get data which is present in store? because both are async related data.... if i do like that it is saying proxy data if i get the data after adding post data to get data........
Obrigado, prof. Dave!
God bless!
Abraço!
You're welcome! 🙏
Thanks Sir but there is a problem can you help me please? in home page each post which we fetch from API is duplicated how to solve that problem?
I don't think you are asking about anything in this video.
Hi Dave, can you tell me when you start a react+redux project, What kind of directory structure do you usually use?
It's too obvious, but does it apply differently for each project? Is there a basic structure?
Breaking the features into a folder structure is the main thing. In this example, that keeps the postsSlice and anything about posts in one location. The users are another feature. Otherwise, a React app structure - which can vary based on preference or on how your dev team structures things.
Thank you for the tutorial. ❤
You're welcome!
Hi Dave,
I am curious when successful edit the post at 26:46 until 26:48. There are times the old post disappear then updated post show. the question is, How to place loading to hide the old post until the updated post ready?
thanks.
As this series moves on to RTK Query, you will see it provides both isLoading and isFetching states which allow you to conditionally render your component while data loading or fetching is happening.
hello sir would you please create a project of multivendor products,,,,,,service available ,,by using reduxjs node mongo
Hello Dave,
First thank you for the courses, I have finished nodejs and now I'm learning redux.
I have a problem
const post = useSelector(state => selectPostById(state, postId))
returns undefined
but when I tried to log posts in console
const post = useSelector(state => console.log(state.posts.posts))
the posts are there
I was able to find the bug. Forgot to add Number(postId) since useParams returns a string and other problem is
export const selectPostById = (state, postId) => {
state.posts.posts.find(post => post.id === postId)
} forgot to add return
Thank for another great video Dave! but I have ran into an issue, the edit post page when I refresh is throws multiple errors because the selectpostbyid doesnt seem to be returning a valid post anymore, please advise
Refreshing the page takes the application back to the initial state. React applications are single page applications even if React router makes it look otherwise. You must have a persist state strategy if you want to be able to refresh pages.
This tutorials are very helpful. But just one suggestion, pls make the video length shorter otherwise it becomes so much over-whelming by the end of the video.
Thank you! My suggestion - bookmarks / chapters for the video are provided in the description. Just do what you can handle in one sitting. Stop the video and come back when you are ready for more - just like the chapters of a book. 😀
DAVE....hanks for your videos, I'm learning a lot...
I have a query... when should I use .unwrap() ??? ((minuto 20:11)) (it is recommended to always use it when using dispatch to force possible errors???)
ESPAÑOL:
Amigo DAVE gracias por tus videos... estoy aprendiendo mucho.....
Tengo una consulta..... cuando debo usar .unwrap() ??? ((minuto 20:11)) (se recomienda usar siempre cuando use el dispatch para forzar posibles errores???)
Not always with dispatch... specifically when we use an Async Thunk that will fulfill or reject a promise. More detail in the docs here: redux-toolkit.js.org/api/createAsyncThunk#unwrapping-result-actions
@@DaveGrayTeachesCode GRACIAS...... acabo de leer la informacion (y dejo aqui en extracto que dice..) En la mayoría de los casos, se prefiere usar la propiedad .unwrap() adjunta, sin embargo, Redux Toolkit también exporta una función unwrapResult que se puede usar para un propósito similar.
Using the attached .unwrap() property is preferred in most cases, however Redux Toolkit also exports an unwrapResult function that can be used for a similar purpose:
for some reason i am not being able to navigate back from the edit page and update isnt workingg...
and found out i was using onchange in button instead of onclick fkkkkkkk
hello dave, on delete post, why do we have to do filtering on the builder to make sure the post state does not contain deleted posts?
didn't we already delete the post via axios, and didn't the post get automatically deleted? if that's the case, why don't we dispatch my post id to do filtering without using axios..
Sorry, Dave, because I don't really understand Axios.
Answer to your first question "why": You want to keep your app state in sync with the server state. We didn't refetch all of the posts. We simply request the server delete the post and then we do the same for local state.
Answer to second question "didn't we": We did delete it with an axios request. Yes, it should be deleted although this example is using a fake API service - jsonplaceholder - that doesn't really delete their example data.
And not sure I follow the last "if that's the case" question because we must use axios to reach out to the server.
Ready finished the video thank you very much... I HOPE you continue with this REDUX TOOLKIT series and we can see interactions with localstore, login, token, work with real node api and mongodb database hahahaha some ideas... thanks again
Español:
Listo termine el video muchas gracias.... OJALA continues con esta serie de REDUX TOOLKIT y podamos ver interacciones con localstore, login, token, trabajar con api real node y base de dato mongodb jaajajaja algunas ideas.... nuevamente gracias
Waw! Dave's Great!
Thanks a lot Dave!
You're welcome! 🙏
Thank you Dave!
You're welcome!
Really appreciate Dave, Awesome ❤
You're welcome! 🙏
what should I do if I want to use my custon json files for user and posts?
You can import JSON files and use them that way. Or you could set up something like JSON Server with will respond as an API with JSON files: www.npmjs.com/package/json-server
Hi! Great tutorial really! I have a question : why if I refresh a single post at localhost:3000/post/1 it says post not found? Why it doesn’r persist? What it could be?
I would just be guessing about what is different in your code. I suggest downloading my source code from the course resources and looking for differences in your code.
@@DaveGrayTeachesCode Thanks! I will do that :) But I was asking because redux state comes undefined after refresh a single post page, I looked on stackoverflaw and saw it was normal in development (right?) Thanks again :)
@@serenaolivieri6360 yes, if you refresh your page, you are reloading your app and the state will go back to initialState.
@@DaveGrayTeachesCode oh! You talked about this a the end of the video, perfect :) Thanks!!
Nice video. Is there other ways to organize your addCase in case too many of them?
If you have too many, it is likely an indication you need more than one slice with each being more specific. This is the only syntax I have read about for their organization.
Thanks you :)
Hi Dave ,
I am react developer and i want to learn redux toolkits, i don't know anything about backend can I follow along this video series??... For backend API are you providing any application or you are using fake api from web ?? Or i have to create backend API by my own to proceed ??
Just using a fake API from the web. You will be good with frontend knowledge here.
Hi Dave,
I'm loving this series, but I think I found and issue.
If I'm not mistaken, the addNewPost reducer looks for the last index in the store of posts, gets the id of that post, then adds one to it before assigning it to the new post?
If I pick a post to edit and then save it, when I look in the redux dev tools, the updated post is now located at the end of the array and all posts are re-indexed accordingly.
Now if I now create an new post, the id of that updated post is selected by the reducer and 1 is added to it before assigning it to the new post.
In all cases but one, this causes a duplicate post.id to be create and cause a duplicate key warning in the PostList mapping.
I think this is discussed in another comment, but this issue is due to the value being returned from the fake API jsonplaceholder. It doesn't really add a new post to the API. Therefore, when you have added more than one - if I remember correctly - it keeps returning the same value for the newly added post and even adding one to it just creates a duplicate. If you set it up with JSON-Server instead for development OR an API returning a real increment, this should not be an issue.
@@DaveGrayTeachesCode Yes, addNewPost takes into account that the id coming back from JSONPlaceholder is wrong and assigns a new one based on the id of last post in the array, however, it seems that updatePost causes the order in the posts array to change placing the updated post in the last post position in stored array.
@@stevereid636 ah I'll take a look. I can't remember if we had already applied the createEntityAdapter by this lesson or not - but eventually, we use the sortComparer function in the entity adapter to sort it all.
Ok, I have re-created this issue. It is still due to the "workaround" for the fake API not providing an actual increment. It comes from the case where addNewPost.fulfilled takes the id of the last post and adds 1 to it. Ideally, the API would provide the correct id and this would be a non-issue. To fix for the fake API, I suggest sorting the state.posts by id before grabbing that value.
Went ahead and push the fix to the impacted lesson folders.
Hi Dave I really love the series. However I did suddenly run into a bug i have never seen. One moment my app was working but suddenly it started telling me that: You may need an appropriate loader to handle this file type.
My code is identical to yours.
Thanks
Can you provide a filename and line number the message refers you to? Also, are you using React 18? This tutorial was made with React 17 and React 18 strict mode is not the same.
@@DaveGrayTeachesCode This is what the terminal is throwing at me:
Module parse failed: Unexpected token (108:27)
You may need an appropriate loader to handle this file type.
| response = _context4.sent;
|
> if (!(response?.status === 200)) {
| _context4.next = 7;
| break;
I am running react v17.
There is definitely something wrong in the parsing stage. If I run your code from github everything is fine. But if I copy it into my on working directory it doesn't.
It also happened suddenly. It was working and suddenly after one save it breaks.
@@DaveGrayTeachesCode Hay Dave, I found a fix. My react-scripts version was 2. I upgraded it to 5 and it now works.
Me surgio una duda ... se puede usar : useCallback y useMemo con redux-toolkit?
disculpa tanta preguntadera.... pero me urge aprender...... saludos y muchas bendiciones por tu grandioso aporte a la comunidad....
Yes, we are using React so we can absolutely use the built-in React hooks like useCallback and useMemo. That said, this tutorial has not optimized anything yet, and Redux Toolkit has some of its own methods for doing so. I'll be covering those in the next video! 💯🚀
@@DaveGrayTeachesCode Excellent... thanks for answering... I'll be VERY attentive to your next videos... hehehehe I have many more questions about this topic..... but I'll leave them pending to ask them in the next videos.....
Español
Excelente... gracias por responder... estare MUY atento a tus proximos videos..... jejejeje Tengo muchas mas pregunta sobre este tema ..... pero las dejo pendiente para realizarlas en los proximos videos.....
Great tutorial!!!!!
Thank you!
Hi Dave,
I am trying to solve the same issue we had with reloading the singlePostPage. If I navigate to post/edit/20, or just refresh, all the details disappear from the form inputs. I seems like the Redux state is loading slower than the local state, so const post, is empty when the page loads.
I try to fix this, by setting the new state when the PostsStatus = succeeded, but then I endup in a invinite loop... Can't get my head around why. Is changing the state, automatically refreshing the information on the page? And how can I work around this? What is the easy solution
It just came to me! Solved it myself.
Just retrieve the postsStatus and if it's set to Succeeded, show the page.
And on each input form, use a ternary operator with:
{ title === undefined ? post.title : title }
Just saw your question and response - glad you solved it!
@@DaveGrayTeachesCode Thanks Dave, great courses!
There’s another way to solve this. Set the states to an empty string and the values of the form to be something like title ? : ‘ ‘
Set up a useEffect with the post variable as a dependancy then inside the use effect set the title/content/userId to post.title etc.
The issue is that the use selector doesn’t retrieve the post data fast enough and causes weird behaviour. By adding the post as a use effect dependency, whenever the post changes and is filled with the post data, it will re-render with the updated states and the form will display the values!
thanks again man for the source code
Welcome! 💯
Hello Dave, I think there is a bug, in the edit post, if I change the author name, it doesn't reflect the new author name, instead, it displays an unknown author name.
Good catch! The e.target.value in onAuthorChanged in the EditPostForm component needs to be converted to a number. It is currently saving a string like "2" for example instead of just 2. Here is the fix: const onAuthorChanged = e => setUserId(Number(e.target.value)) - I will update the repo!
please make a video about reduxtoolkit with nexjs ssr
Thank you for the request! 🙏
Amazing tutorial
Thank you, Sona! 🙏
Amazing🤩🤩🤩
good tutorial !!!
Thank you!
18:40 Can you quickly explain me what is the "?." in "post?.title"
search for "optional chaining"
Thank you, Szymon! This is the correct answer, Santanu. 💯
@@szymonoleszek2086 Thank you for the help.
Good video!
Thank you!
Awesome Tutorial +++++++++++++++++++++++
It's good but the worst feature here that you are copying and pasting man, make some console logging for clarification
I'll never make everyone happy. It's advanced and I would have more complaints about watching me type everything out. Speed it up, slow it down, do your own thing. It's free.
@@DaveGrayTeachesCode ok 👍
Dave’s tutorial are based on react redux docs which are in the description. Read them instead of being lazy expecting it all to get spoon fed into you!
savage !
7:00 - again, you shouldn't have put in index.js This code is redundant
See my comment on your first post. Try being less arrogant and critical. You will learn more.
great