2
\$\begingroup\$

I've implemented the logic of my app, but I'm not sure whether it appropriate way or not.

Task: create a react app using redux, react-router v4 which has a page with a form for adding new post and list of postspage with form and list of posts

and a page with a detail view of one of the postsdetail view of post

I've added a unique id for each post with help of uuid and pass id of each post to the corresponding link(react-router-dom link) in the post list

      <Link to={props.id} className='post__header'>{props.title}</Link>

When link is clicked it passes id to the DetailView component. DetailView component takes id and seek the post with the same id in the whole state then render the post

import React from 'react';
import { connect } from 'react-redux';

let DetailView = (props) => {
  console.log(props);
  var currentPost = props.posts.find(post => post.id === props.match.params.id);

  return (
    <div>
      <h1>{currentPost.topic}</h1>
      <p>{currentPost.text}</p>
    </div>
  )
}

const mapStateToProps = (state) => {
  return state;
};

DetailView = connect(mapStateToProps)(DetailView);

export default DetailView;

Github link: https://github.com/LKTN/Branch/tree/dev

\$\endgroup\$
0
\$\begingroup\$

Looks good after a quick skim. Just one point. I think this project could benefit from following the Container Component pattern so that the markup components don't directly depend on redux and are reusable.

Read more at https://medium.com/@learnreact/container-components-c0e67432e005

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.