iamshaunjp / react-redux-complete-playlist

The course files for the React & Redux Complete tutorial playlist on The Net Ninja YouTube channel.

react-redux-complete-playlist

The course files for the React & Redux Complete tutorial playlist on The Net Ninja YouTube channel.

react-redux-complete-playlist's Issues

Updating the README.md

We can update the readme.md file by adding the link of youtube channel and youtube playlist of the course provided and we can also describe how can someone check out different lectures content on different branches .
This new type of README.md file can help the person who landed on this repository through github not through the youtube channel.

Lesson 38

Please add lesson 38 file.
that was a simple codepen.io js file.

:Post_id renders Post as undefined

Hello,
thanks for your awesome work.
Learned React fast, using this but I've an issue

Post.js:

`
import React, { Component } from 'react';
import { connect } from 'react-redux';

class Post extends Component {
render() {
    console.log(this.props);
    const post = this.props.post ? (
        <div className="tl dib w-80 shadow-2 mv2 br2 pa3">
            
            <div className="cf">
                <h3 className="lh-title fl-l">{ this.props.post.title }</h3>
                <small className="tr fr-l">Posted by: { this.props.post.id }</small>
            </div>
            <p>{ this.props.post.body }</p>
        </div>
    ) : (
        <div className="center pv4">
            <span className="blue dim">Loading posts...</span>
        </div>
    )
    return (
        <div className="tc">
            <div className="pv3 ph5 m-auto">
                {post}
            </div>
        </div>
    )
}
}

const mapStateToProps = (state, ownProps) => {
//    let usernames = ['', 'Dan', 'Liz', 'Ben', 'Ashley', 'Dave', 'Quin', 'Sasha'];
    let id = ownProps.match.params.post_id;
    console.log(id)
    return {
        post: state.posts.find(post => post.id === id)
    }
}

export default connect(mapStateToProps)(Post)`

Home.jsx:
`
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Img from '../assets/img/poke.png';
import { connect } from 'react-redux';

class Home extends Component {
    render() {
        const { posts } = this.props;
        const postList = posts.length ? (
        posts.map(post => {
            return (
                <div className="tl dib w-80 shadow-2 mv2 br2 pv3 pl5-l post overflow-hidden" key={ post.id }>
                    <img src={Img} alt="icon image" className="w4"/>
                    <h3 className="lh-title">{ post.title }</h3>
                    <p>{ post.body.slice(0, 40) }...</p>
                    <Link to={ '/'+post.id } className="link grow bg-blue white pa2 br2">
                        <span>Read more</span>
                    </Link>
                </div>
            )
        })
    ) : (
        <div className="tl dib w-80">
            <h4>No posts</h4>
        </div>
    )
    return (
        <div className="tc home">
            { postList }
        </div>
    )
}
}

const mapStateToProps = (state) => {
    return {
        posts: state.posts
}
}

export default connect(mapStateToProps)(Home)

rootReducer.js:
`
const initState = {
posts: [
{id: 1, title: 'qui est esse', body: 'quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto'},
{id: 2, title: 'ea molestias quasi exercitationem repellat qui ipsa sit aut', body: 'et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut'},
]
}

const rootReducer = (state = initState, action) => {
return state;
}

export default rootReducer;`

if I click on read more to show the detail view, I always get empty: undefined
`

### _**Why did u close it?**_

Why did u close it? - This was made because I am now on the React Tutorial from The Net Ninja and someone closed branch: lesson 19

It could have stayed!

Lesson 18 - unique key at addNinja!

Replace this.props.addNinja(this.state); to this.props.addNinja({...this.state});
Because children have to have unique key!

Thanks for your lessons!

how does the second parameter gets added to the spread operator

in the below code why do we need the second parameter next to spread op('ninja'),how and what will addition be done

 // addNinja = (ninja) => {
   // ninja.id = Math.random();
    let ninjas = [...this.state.ninjas, ninja];
    //this.setState({
      //ninjas: ninjas
    //});
  //}

why "this" can not be used ?

while using className = {className}, we're not using "this" ---> className = {this.className} ?

please provide source files

Please provide source files which you create in your videos thanks

Direct modification of 'AddNinja' component state

over here :

 handleSubmit = e => {
  e.preventDefault();
  this.props.addNinja(this.state);
 }

while passing this.state in addNinja() function, we are actually passing the state of 'AddNinja' component directly as reference to the function. So this 'AddNinja' state is directly being modified :

 addNinja = (ninja) => {
    ninja.id = Math.random();     // state modified directly here
    this.setState({
      ninjas: [...this.state.ninjas, ninja]
    });
  }

here an id is added directly to 'AddNinja' state which should not be done and hence gives me error when i give submit on same data more than once.

ReactRedux Playlist

please rectify it is in react redux playlist "Invariant failed: You should not use outside a "

Why the repo is empty?

Issue

TypeError: Object(...) is not a function

I'm having this error when i try use connect(HOcC react-redux) in a component
const mapStateToProps = state => ({ posts: state.posts});
export default connect(mapStateToProps)(Home)