react/reduxアプリケーションのボタンをクリックしたときに簡単なリクエストをする

Question

この質問があまりにも広すぎると、私は正しいことになるか、自分がしていることに合った例を見つけることができません。

基本的に私のレデューサーの1人は、ID、名前、URLを含むオブジェクトで、リスト内の各ボタンが所有しています。ボタンの1つをクリックするたびに、そのURLにリクエストをして、リストの形式で含まれているデータを返します。 今のところ、すべてのアプリケーションは、押されたボタンのID、名前、およびURLを表示します。どのように私は世界にどのようにURLに要求を取得し、何が含まれて表示することができますか？

//example reducer of the button: 
export default function(){ 
return [ 
{ 
    id: 0, 
    name: button1, 
    url: http://jsoncodeINeed.com/api 
}, 

{ 
    id: 1, 
    name: button2, 
    url: http://otherJsoncodeINeed.com/api 
} 

    ]; 
} 
//reducer that will take care of the action: 
export default function(state=null, action){ 
switch(action.type){ 
    case 'MODULE_CLICKED': 
     return action.payload; 
     break; 

} 
return state; 
} 

//actions 
export const moduleClicked = (module) =>{ 
    return { 
     type: "MODULE_CLICKED", 
     payload: module 
    } 
} 

//container for where I want to post the data in the button: 
class ModuleLog extends Component{ 

    render(){ 
      return (
       <Panel 
        {this.props.module.name}{this.props.module.url} 

       </Panel> 
      ); 

} 

function mapStateToProps(state){ 
    return { 
     module: state.moduleLog 
    }; 
} 

export default connect(mapStateToProps)(ModuleLog); 

//container for the button group: 
class ModuleButtons extends Component{ 

    createListItems(){ 
     return this.props.modules.map((module)=>{ 
      return (
       <ListGroupItemkey ={module.id} 
        onClick={()=>this.props.moduleClicked(module)}>{module.name}</ListGroupItem> 
      ); 
     }); 
    } 

    render(){ 
     return (
      <ListGroup> 
       {this.createListItems()} 
      </ListGroup> 
     ); 
    } 
} 

function mapStateToProps(state){ 
    return { 
     modules: state.modules 
    }; 
} 

function matchDispatchToProps(dispatch){ 
    return bindActionCreators({moduleClicked: moduleClicked}, dispatch) 
} 

export default connect(mapStateToProps, matchDispatchToProps)(ModuleButtons); 

私の店は私が単に単にきれいにコンテナを表示するコンポーネントを表示index.jsファイル、である：

は、ここに私の現在のコードです。

Answer 1

reduxページのAsyncActions documentationでお読みください。基本的に、ボタンをクリックしたときに発生するアクションからリクエストを行いたいとします。応答を受け取ると、受信したデータを使って2番目のアクション（「SUCCESS_REQUEST」など）を発生させます。減速機はそれに応じてストアを更新し、UIを更新します。