gitdagray/react_redux_toolkit

"React Redux Toolkit for Beginners"

7 8 Chapters

---

Author Links

👋 Hello, I'm Dave Gray.

✅ Check out my YouTube Channel with all of my tutorials.

🚩 Subscribe to my channel

☕ Buy Me A Coffee

📬 Course Updates

🚀 Discord

👇 Follow Me:

• Twitter
• LinkedIn
• Blog
• Reddit

---

Description

📺 YouTube Playlist for this repository.

🚀 This repository shares ALL of the resources referenced during the React Redux Toolkit tutorial series.

✨ Based on the "Redux Essentials" tutorial in the official Redux Toolkit docs by Mark Erikson with some project additions and modifications along the way.

---

🎓 Academic Honesty

DO NOT COPY FOR AN ASSIGNMENT - Avoid plagiarism and adhere to the spirit of this Academic Honesty Policy.

---

📚 Redux References

• 🔗 Official Site for Redux Toolkit
• 🔗 Redux Devtools
• 🔗 Immer.js

📚 React Router References

• 🔗 Official Site for React Router
• 🔗 React Router v6 Tutorial

⚙ VS Code Extensions I Use:

• 🔗 ES7 React JS Snippets Extension
• 🔗 vscode-icons VS Code Extension
• 🔗 Github Themes VS Code Extension

---

💻 Source Code

• 🔗 Chapter 1 - Intro to Redux
• 🔗 Chapter 2 Starter Code - Example Project
• 🔗 Chapter 2 Completed Code - Example Project
• 🔗 Chapter 3 Starter Code - Async Thunks
• 🔗 Chapter 3 Completed Code - Async Thunks
• 🔗 Chapter 4 Starter Code - Blog Project
• 🔗 Chapter 4 Completed Code - Blog Project
• 🔗 Chapter 5 Starter Code - Performance
• 🔗 Chapter 5 Completed Code - Performance
• 🔗 Chapter 6 Starter Code - RTK Query
• 🔗 Chapter 6 Completed Code - RTK Query
• 🔗 Chapter 7 Starter Code - Advanced Redux Blog
• 🔗 Chapter 7 Completed Code - Advanced Redux Blog

🚩🚩🚩

• 🔗 Chapter 8 - Blog Project with full RTK Query Refactor

react_redux_toolkit's Issues

Add reaction cause rerender all PostsExcerpts

In 08_lesson.
clicking add reaction button will cause all <PostsExcerpt> components to be re rendered because in <PostsList> we are using all posts from useGetPostsQuery
const PostsList = () => { const { data: posts, isLoading, isSuccess, isError, error } = useGetPostsQuery('getPosts')
to fix this performance issue we could select only posts.ids from it.
Like this:
const PostsList = () => { const { postsIds, isLoading, isSuccess, isError, error } = useGetPostsQuery('getPosts', { selectFromResult: ({ data, isLoading, isSuccess, isError, error }) => ({ postsIds: data?.ids, isLoading, isSuccess, isError, error, }), })
After this fix only one <PostsExcerpt> component will be re rendered.

Before:

After:

Had a problem in chapter 3.

Dave,

Love your stuff! You are the best. Thank you all all you're doing to help us new and inspiring developers.

In chapter three (I believe) I ran into a problem where the code added the 100 posts twice...creating a 200 post rendering and some weird behaviors for clicking on the emojis. When I added a new post it would place the new post right after the first post...not before.

I don't know the reason for this entirely...since I'm still new to the react and redux world but I hung with it for a while and eventually, in the postsSlice.js file (somewhere around line 88), I changed the code from:

'state.posts = state.posts.concat(loadedPosts);'

to

'state.posts = loadedPosts;'

With this change the rendering of all the posts twice stopped. With this change I also noticed that when I created a new post it was placed on the top. So I'm wondering if maybe between when you released the video tutorials and now (a couple of years later) maybe react, reduce, thunk or axios or something else has updated that created this twice rendering and making a 200 entry list of posts problem.

I wanted you to know what I encountered and how it was maybe fixed(???? time will tell as I do more work).

Wishing you all the best.

my email is [email protected] if you want to share any further insights...I am a new developer in training and your stuff is really really good!

All the best,

David

posts/AddPostForm.js onSavePostClicked should check the userId too and also should clear the state too setUserId('')

const onSavePostClicked = () => {
    if (title && content && userId) {
        dispatch(
            postAdded(title, content, userId)
        )
        setTitle('')
        setContent('')
       setUserId('')
    }
}

Running useEffect in react 18:

I noticed the code below will not work in React 18 as the component renders twice during the initial rendering. in strict mode

 .addCase(fetchPosts.fulfilled, (state, action) => {
               state.status = 'succeeded'
               // Adding date and reactions
               let min = 1;
               const loadedPosts = action.payload.map(post => {
                   post.date = sub(new Date(), { minutes: min++ }).toISOString();
                   post.reactions = {
                       thumbsUp: 0,
                       wow: 0,
                       heart: 0,
                       rocket: 0,
                       coffee: 0
                   }
                   return post;
               });

               // Add any fetched posts to the array
               state.posts = state.posts.concat(loadedPosts)
           })

after adding reaction buttons, getting a typerror undefined in the reaction button element witb reactionEmoji properties upon post save

Access to fetch at 'http://jsonplaceholder.typicode.com/posts' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

I am trying to make a post request to the api in LESSON 3 to create a new post and it to the posts but its giving me this error