NotePad

Rachelpadworski
3 min readDec 24, 2020

My final project at Flatiron School.

Creating an app in React-Redux has been so satisfying. I now understand why React seems to be the industry standard for frameworks. For the backend I used Ruby on Rails to build the API.

This final project is a Reddit Clone. There are Users, Posts, and Comments. Users can edit and delete their comments. Here are some other items on my wishlist:

  • Adding Communities
  • User profiles
  • More styling
http://localhost:3001/api/v1/posts/new

One thing I struggled with was my navbar links. Apparently React isn’t a fan of Bootstrap’s Nav.Link. React-router has a Link component it prefers. With the example below I was render a new page every time AND I was going to localhost:3001/posts/posts which displayed a NaN error.

Good news: there’s a work-around: you can render a component inside of Bootstrap’s Nav.Link. Just import Link from ‘react-router-dom’, then render Nav.Link as={Link}; see below. I also needed to add in a “/” before each link (i.e. “/posts” instead of “posts”). The following works with my code and hopefully it can help you too!

Let’s talk about mapStateToProps. First of all, as a beginner I thought I’d have to map the posts to the state, i.e. posts: state.posts. I soon learned that if you combine your reducers it creates a new object with new keys. In my case, the keys were postReducer and userReducer. Therefore, I needed to return posts: state.postReducer.posts within mapStateToProps.

Writing it this way allowed me to access state (an array of posts) that were being updated through the postReducer. Voila! Magic.

Here is my “/posts” page. Of course a little styling will go a long way, so I’ll be updating that. It’s been satisfying completing yet another project at Flatiron School, especially in React!!

UPDATE:

I am no longer using Bootstrap and have enjoyed incorporating many new CSS features. See below.

--

--

Rachelpadworski
Rachelpadworski

No responses yet