コンポーネント内のアクションからデータにアクセスする| Redux

Question

おはようございます（あなたの質問に申し訳ありません）！

私は自分のAPIから取得しているユーザーの名前を表示するためにnavbarを取得したいと考えています。私のコンソールではnameというキーでuser objectが表示されています。

だから私は、データへのアクセスを取得するためのベストプラクティス何だろうか？ ところで、Navbarの抜粋があります。

class MainNavbar extends Component { 
    logout(e) { 
    e.preventDefault() 
    this.props.logout() 
    } 
    render() { 
    return (
     <Navbar inverse collapseOnSelect> 
     <Navbar.Header> 
      <Navbar.Brand> 
      <div> 
       <img id="logo" alt="Qlocx Logo" src={qlocx} /> 
      </div> 
      </Navbar.Brand> 
      <Navbar.Toggle /> 

と下部に：この悪いとnooby質問を読み取るための

MainNavbar.propTypes = { 
    logout: React.PropTypes.func.isRequired 
    // I guess I need to do something here 
} 

function mapStateToProps(state) { 
    return { 
    auth: state.auth 
    // And here as well, but what? :O 
    } 
} 

export default connect(mapStateToProps, { logout })(MainNavbar) 

おかげで多くのことを。私が得ることができるすべての助けに感謝します！

ありがとうございます！コンポーネントの小道具にReduxの状態からユーザ名をマップするために

Answer 1

、あなたがする必要がありますpropTypesに追加します

。

MainNavbar.propTypes = { 
    logout: React.PropTypes.func.isRequired, 
    name: React.PropTypes.string 
} 

還元状態から新しいプロップをマップします。 あなたは条件付きでコンポーネントに名前が表示され、これは正しく状態からマッピングし

function mapStateToProps(state) { 
    return { 
    auth: state.auth 
    name: state.user.name 
    } 
} 

ていることを確認する必要があります。

<Navbar.Header> 
    <Navbar.Brand> 
    <div> 
     <img id="logo" alt="Qlocx Logo" src={qlocx} /> 
    </div> 
    </Navbar.Brand> 
    {this.props.name ? this.props.name : null} 
    <Navbar.Toggle /> 

Answer 2

<Provider store>が必要な場合は、コンポーネントにReduxストアを使用できます。全く真実ではない

https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store