2016-10-13 8 views
0

この質問があまりにも広すぎると、私は正しいことになるか、自分がしていることに合った例を見つけることができません。react/reduxアプリケーションのボタンをクリックしたときに簡単なリクエストをする

基本的に私のレデューサーの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ファイル、である:

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

+0

「redux-thunk」ミドルウェアを使用して非同期要求を行うことができます。 –

+0

アクション内で実際の非同期呼び出しを行います。サンクを使うこともできますし、mapDispatchToPropsを使うこともできます(別のライブラリは必要ありません)。基本的な考え方は、アクション作成者への呼び出しに必要な情報をすべて渡し、呼び出しを行い、結果データをレデューサーに渡して自分の状態に置くことです。また、1つの簡単なメモ - あなたの減速機では、状態の代わりにaction.payloadを返しています。これはあなたが現在の状態であったものを上書きするので、注意してください。 – ajmajmajma

+0

@ajmajmajma私は手動で入れたURLでこれをやろうとしていますが、現在、私はそのアクションをアプリケーションの残りの部分と結びつけるのに苦労しています。別のURLにあるURLからどうやってやるのか分かりません減速機。 – theJuls

答えて

0

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

+0

私は、reduxのページのドキュメントを何度か試してみましたが、残念ながら、残念ながら、私のコードに取り込もうとすると混乱しています。( – theJuls

+0

あなたの簡単な説明が既に私に少しの洞察力を与えてくれたので、ありがとう!:) – theJuls

+0

ええ、私は、1ページが最も簡単な場合を過ぎて本当に良い仕事をしていることを意味します。あなたが試したことを投稿したら、おそらくそれを修正することができますか? – ZekeDroid

関連する問題