About the Portfolio Project: Reddit Project category

Projects Portfolio Project: Reddit Project
210

Oh, I see… I didn’t realise that you could just but that into your browser to get the file. But I have read the setup again and that is what it says!

Thank you for getting back to me! So simple. :slight_smile:

Regards,
Kiernan

211

Hi all, I tried to push myself to get this done as fast as I could. I spent four days on it so there is some functionality missing, such as no comments are viewable and there is no new page loaded of individual posts. That being said I wish to revisit this and refine it further on.
If you have any insights, critiques, or questions please let me know.

Thanks for everything everyone!

212

Hi, did anyone get an error about ‘A non-serializable value was detected in the state’ when mapping over the returned data. I am part way through the project and I am mapping over some mock data. It was working fine the other day, but I have just started working on a different feature and just started seeing this error when trying to render posts?

213

Hi, y’all just finished on my reddit-Miniclient. I tried to finish as fast as I can, so I did not implement the upvote and downvote features, maybe later on. Anyway, I will appreciate any feedback.
Github
Netlify
Thanks. Happy Coding

214

The error “A non-serializable value was detected in the state” in Redux usually indicates that you are trying to store a non-serializable value in your Redux state. Redux recommends that all state should be serializable because non-serializable state can lead to unpredictable behavior and bugs, especially when persisting state or debugging.

Here are some common causes and solutions to this problem:

Common Causes and Solutions:

  1. Functions in State:
    Ensure you are not storing functions directly in your state. Instead of storing a function, store the result of the function call.

  2. Non-serializable Objects:
    Check if you are storing complex objects like instances of classes, Dates, Promises, or other non-serializable objects directly in the state.

  3. Circular References:
    Make sure there are no circular references in the objects you are trying to store.

Steps to Troubleshoot and Fix:

  1. Identify the Source of Non-Serializable Data:
    Inspect the state where the error is occurring and check what data you are trying to store. Look for any non-serializable values.

  2. Sanitize the Data:
    Before storing data in the state, make sure it is serializable. Convert complex objects to plain objects if necessary.

  3. Middleware to Detect Non-Serializable Values:
    You can use the redux-immutable-state-invariant middleware in development to catch mutations and non-serializable values in the state.

  4. Modify the State Shape:
    Restructure your state to ensure all stored values are serializable. For example, if you have dates, store them as ISO strings and convert them back to Date objects when needed.

Example Scenario:

Suppose you have an array of post objects, and each post has a date stored as a Date object, which is non-serializable. You should convert the date to an ISO string before storing it in the state.

Before:

const initialState = {
  posts: [
    { id: 1, title: 'Post 1', date: new Date() },
    { id: 2, title: 'Post 2', date: new Date() }
  ]
};

After:

const initialState = {
  posts: [
    { id: 1, title: 'Post 1', date: new Date().toISOString() },
    { id: 2, title: 'Post 2', date: new Date().toISOString() }
  ]
};

When you need to use the date, convert it back:

const postDate = new Date(post.date);

Example of Using Redux Toolkit:

If you are using Redux Toolkit, it has built-in checks for non-serializable values in state by default. You can disable these checks if needed, but it is recommended to fix the root cause.

Configure Store:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // Disable if necessary
    }),
});

Best Practice: Fix Non-Serializable Values Instead:

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

const serializableMiddleware = getDefaultMiddleware({
  serializableCheck: {
    // Ignore these action types
    ignoredActions: ['your/action/type'],
    // Ignore these field paths in all actions
    ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
    // Ignore these paths in the state
    ignoredPaths: ['items.dates'],
  },
});

const store = configureStore({
  reducer: rootReducer,
  middleware: serializableMiddleware,
});

Final Thoughts:

Ensure your state remains serializable to avoid these issues. Using plain objects, arrays, strings, numbers, and booleans for your state values will help maintain the predictability and integrity of your application. If you encounter non-serializable values, convert them to a serializable format before storing them in your Redux state.

Sourced from GPT40

215

Hi, amazing app. Though your videos are set to autoplay and are not muted. It would be a wonderful user-experience if the videos were not in autoplay and were muted. Thanks.

216

Hi, everyone!

I would love to get your feedback on my Reddit project. I had a lot of fun building it and I did learn quite a lot from this project. It still needs some minor tweaks in my opinion like adding the option to load more posts and comments than the initial batch, but those will be addressed some time in the future. :smiley:

You can check out the live app here: RedditXplore
You can take a peak at the code in the repo here: Repo

Happy coding guys! :computer:

217

Hi, Your site looks really good by the way. Well done :slight_smile:

1 Like
218

Hi,

OK here is my attempt. I have got the main functionality in there. However, I think that I could do a bit more to help with the loading states so that there is something on screen. I also Think that my error page needs a little tidying up.

https://redditclientkh.netlify.app/

Anything that any finds in my repo that might be help please help yourself. I know that I had to get some pointers on this one.

Thanks,
Kiernan

219

Hi dude, thanks a lot! :slightly_smiling_face: I like yours too! :+1:

You just might want to consider making the side and search bars sticky for better UX.

220

Ah, yes good shout! Thank you for the foodback. :slight_smile:

221

Hi, sorry, I just realised that I didn’t respond to this. Thank you for your help :slight_smile:

1 Like
222

Hi, your app is pretty amazing, among the best I have seen, though the images could use some work , some of them are a bit squished , overall 10/10. The loading it does before displaying , amazing.

1 Like
223

Hi, thanks for your feedback, it’s much appreciated! :pray:

I was thinking about how to solve the problem with people sharing different size images, but I could not come up with a logical solution. I would like to keep the post containers all the same size for good symmetry and consistency, so I need the height value to be fixed, which is a problem if the user uploads an image with greater height value than the one set on the post container. :thinking:

If anyone has a suggestion on how to fix that, feel free to contribute to my project and open up a pull request with the implemented solution. Happy coding! :slightly_smiling_face:

224

Hi, everyone! :smiley:
Here is my recent version of the reddit project. I’m certain that there will be more features on this app as I learn more. It was a fun project!
Feedback would be much appreciated :slight_smile:

Live site: noeddit
Github repo: https://github.com/emilchr/noeddit

1 Like
225

Hi Angela, I’m also trying to use Redux with React Router (v6) and I’m so confused!
I was wondering if there was any way to access your repo (I don’t know if you’ve made it private or deleted it)?
Thank you so much!
Bianca

226

Hi Bianca, sorry for the late reply. My repo is private but I just made it public so you can check it out. I use redux with react-router, using an async function inside the loader attribute of the Route element from ‘react-router-dom’. You can start to look at the App.js file so it can make sense.

ANGELA-PARGA/REDDIT-SUMMARY: Practice project (reactJS, Redux toolkit, react router) (github.com)

1 Like
227

Thank you so much Angela!

228

hi Cadesius
I’m Amr Youssef, 94% completing the front-end career path, I’m now completing the reddit app
I overlooked your repo and the site, I liked your building by router and i’d love to know why you make the files with jsx extension not js what is the difference

229

Hi, @board1126185786.
Thanks! Glad to hear.
I’m using the .jsx extension becouse I write jsx-syntax in the files. That makes it possible for me to write HTML and JS directly in the file.
Like this:

return <p>Hi, {$props.name]!</p>;

A regular .js file won’t allow that syntax.There’s more here if you want to read: Proposal: [react][breaking] Only .js files should contain JSX. by KevinGrandon · Pull Request #985 · airbnb/javascript · GitHub

Though a .jsx file will need compilation, so if there is no HTML in the file, it’s best to go with .js (would think this is “best practice”.

1 Like