react-reduxでGETリクエストを正しく行うにはどうすればいいですか？

Question

私の目標は、基本的にGETリクエストを反応的に行うことです。私はPOSTを使ってそれを行う方法を知っていますが、GETではできません。なぜなら、アクションを引き起こしているイベントがないからです。

相続人は私は、データを取得するために、これをトリガしないアクション

export function getCourses() { 
    return (dispatch) => { 

    return fetch('/courses', { 
     method: 'get', 
     headers: { 'Content-Type': 'application/json' }, 
    }).then((response) => { 
     if (response.ok) { 
     return response.json().then((json) => { 
      dispatch({ 
      type: 'GET_COURSES', 
      courses: json.courses 
      }); 
     }) 
     } 
    }); 
    } 
} 

ためのコード？コンポーネント内？

import React from 'react'; 
import { Link } from 'react-router'; 
import { connect } from 'react-redux'; 
import { getCourses } from '../actions/course'; 


class Course extends React.Component { 

    componentDidMount() { 
     this.props.onGetCourses(); 
    } 

    allCourses() { 
    console.log(this.props.onGetCourses()); 
     return this.props.courses.map((course) => { 
     return(
      <li>{ course.name }</li> 
     ); 
     }); 

     return this.props 
    } 

    render() { 
    return (
     <div> 
     <ul> 
      { this.allCourses() } 
     </ul> 

     </div> 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    courses: state.course.courses 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onGetCourses:() => dispatch(getCourses) 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Course); 

私はこれを試しましたが動作しません。

コースリデューサーは、あなたが気づかなかった場合には

const initialState = { 
    courses: [] 
}; 



export default function course(state= initialState, action) { 

    switch (action.type) { 
    case 'GET_COURSES': 
     return Object.assign({}, state, { 
     courses: action.courses 
     }) 
    default: 
     return state; 
    } 


} 

Answer 1

最初に、onGetCourses:() => dispatch(getCourses)をonGetCourses:() => dispatch(getCourses())に変更する必要があります（実際にはアクションクリエイターを呼び出す必要があります）。

アクションをどこに呼び出すべきかについては、あなたが行ったように、componentDidMountで行うことが大丈夫です。

Answer 2

1. 、あなたが持っているあなたのallCoursesで2つのリターンのを（）。
2. 私のコードベースにも同様のコードがありますが、関数がアクションオブジェクトを返す必要があるため、fetchおよびresponse.json（）の前でreturnを使用しません。