小道具を容器に戻す

Question

私は反応するのが初めてです。私は曲のリストを表示しています。ユーザーが自分のお気に入りに曲を追加できるようにしたいのですが。私は好きな曲を保存するためにReduxを使用しています。マイプレイリストのコンポーネントは次のようになります。

import AddSong from '../containers/AddSong' 

class Playlist extends Component { 

    render(){ 
     return (
      <div> 
      <h1>Playlists</h1> 
      <ul className="container"> 
       {this.state.items.map(item => 
       <li key={item.track.id}> 
        {item.track.name} by {item.track.artists[0].name} 
        <img src={item.track.album.images[0].url} height="150" width="150" /> 

        <AddSong title={item.track.name} /> 

       </li> 
      )} 
      </ul> 
      </div> 
     ); 

    } 
    ... 
} 

だから私は<AddSong title={item.track.name} />

でAddSongに曲の名前を渡してAddSongは、次のようになります。thisプロパティを持つオブジェクトです。しかし、

import React from 'react' 
import { connect } from 'react-redux' 
import { addSong } from '../actions' 

let AddSong = ({ dispatch }) => { 
    let input 

    console.log('this is ', this); 

    return (
    <div> 
     <form 
     onSubmit={e => { 
      e.preventDefault() 
      // GET SONG FROM PROPS AND DISPATCH 
      //dispatch(addSong(input.value)) 

     }} 
     > 
     <input 
      ref={node => { 
      input = node 
      }} 
     /> 
     <button type="submit"> 
      Add Song 
     </button> 
     </form> 
    </div> 
) 
} 
AddSong = connect()(AddSong) 

export default AddSong 

：

{ 
    a: Connect(props, context) 
} 

どのように私は歌のタイトルを得るのですかAddSongで？

EDIT

だから、これは私が今、ImはここAddSongに曲のタイトルを渡してきたものである：私は何を示すために、歌やタイトルなどで歌のタイトルを渡している

<AddSong song={item.track.name} title={item.track.name} /> 

起こるAddSongで

、私が持っている：

const mapStateToProps = (state) => { 

    const {song:song} = state; // or whatever the reducer called 
    return {song}; 
}; 

const mapDispatchToProps = (dispatch) => ({ 

    addSong: (value) => dispatch(addSong(value)), 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(AddSong); 

そしてAddSongの上部に私がやっている：

let AddSong = ({ dispatch, ...props }) => { 
    let input 

    console.log('props is ', props); 

をコンソール出力：

props is Object {song: undefined, title: "Young Blood"} 

私が変更しましたボタンへ：

<button onClick={(value)=>props.addSong(value)}> 
    Add Song 
</button> 

私がクリックすると、このエラーを与える：

Failed prop type: Invalid prop `songs[0].text` of type `object` supplied to `SongList`, expected `string 

Answer 1

は

const mapStateToProps = function(store) { 
    return { 
    data: store.data 
    }; 
    } 

AddSong = connect(mapStateToProps)(AddSong) 

Answer 2

この機能を使用してみてください、私はこの場合、あなたは減速を持っていて、小道具を経由して状態にアクセスするとしますあなたはmapStateToPropsなどの場合

const mapStateToProps = (state) => { 
 

 
    const {song:song} = state; // or whatever the reducer called 
 
    return {song}; 
 

 
}; 
 

 
const mapDispatchToProps = (dispatch) => ({ 
 
    addSong: (value) => dispatch(addSong(value)), 
 
}); 
 

 
export default connect(mapStateToProps, mapDispatchToProps)(AddSong);

次に、あなただけのthis.props.songを書くことができます。