react/redux 응용 프로그램에서 버튼을 클릭하면 간단한 요청을 내게됩니다.

Question

죄송합니다.이 질문이 너무 광범위하다면, 나는 옳은 일이나 내가하고있는 일에 합당한 예를 찾을 수없는 것 같습니다.

기본적으로 내 감속기 중 하나는 목록에있는 각 버튼의 ID, 이름 및 URL이 포함 된 개체입니다. 단추 중 하나를 클릭 할 때마다 해당 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을 읽어야합니다. 본질적으로 버튼을 클릭 할 때 실행되는 작업으로부터 요청을 보내려합니다. 응답을 받으면 수신 된 데이터를 사용하여 두 번째 작업 ("SUCCESS_REQUEST"와 같은 것)을 시작합니다. 그러면 감속기가 상점을 업데이트하여 UI를 업데이트합니다.