React - Reduxでデータを取得して再レンダリングする

Question

おはよう！私は動的なドロップダウンメニューをしたい、魔女はサーバーからデータを取得します。だから、メニュー項目をクリックしたら、サーバーからデータを取得し、結果をリストに表示したいと思います。このように：

import React, {Component} from 'react' 
import {connect} from 'react-redux' 
import {fetchData} from 'actions' 

class MenuItem extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     isOpened: false, 
    } 
} 

toggleOpen() { 
    this.props.fetchData(); // Here is fetching data using redux-thunk 
    this.setState({isOpened: !this.state.isOpened}); 
} 

render() { 
    const {data} = this.props; 

    return (
      <a href="#" className="left-menu__link" 
       {...(this.state.isOpened && { 
        className: "left-menu__link is-opened" 
       })} 
       onClick={(e) => { 
        e.preventDefault(); 
        this.toggleOpen.bind(this)(); 
       }}> 

      <ul className="left-menu__sub-level"> 
       {!R.isEmpty(data) && data.map((item) => 
        <li item={item} key={item.id}/>)} 
      </ul> 
    ) 
} 

const mapStateToProps = state => ({ 
    data: getData(state), // get data from state 
}); 

const mapDispatchToProps = { 
    fetchData 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(MenuItem) 

これを行うにはどのような方法が良いのですか？

Answer 1

ここで私はいくつかのコードを変更しました。私はそれが助けてくれることを願っています

import React, {Component} from 'react' 
import {connect} from 'react-redux' 
import {fetchData} from 'actions' 

class MenuItem extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isOpened: false 
     } 

     this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick(e) { 
     e.preventDefault() 
     this.setState({isOpened: !this.state.isOpened}) 
     this.props.fetchData().then((response) => { 
      .... 
      .... 
     }) 
    } 

    render() { 
     const {data} = this.props; 
     const className = !this.state.isOpened ? 'left-menu__link' : 'left-menu__link is-opened' 

     return (
       <a href="#" className={className} 
        onClick={this.handleClick}> 

       <ul className="left-menu__sub-level"> 
        {!R.isEmpty(data) && data.map((item) => 
         <li item={item} key={item.id}/>)} 
       </ul> 
     ) 
    } 
} 
const mapStateToProps = state => ({ 
    data: getData(state), // get data from state 
}); 

const mapDispatchToProps = { 
    fetchData 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(MenuItem)