GoogleシートAPI v4でReact/Reduxがデータを取得していません

Question

GoogleシートAPIとReact/Reduxを使用しているアプリケーションを作成しています。

コンポーネント自体からAPIをヒットした場合は動作しますが、Reduxを介してデータを取得する際に問題が発生します。

これはコード

アクションの作成者である：

export function fetchList() { 
    let data = null; 
    gapi.client.sheets.spreadsheets.values.get({ 
     spreadsheetId: FULL_LIST_ID, 
     range: RANGE 
    }).then((response) => { 
     data = response.result.values; 
    }, (response) => { 
     throw response.result.error.message; 
    }); 

    return { 
     type: FETCH_LIST, 
     payload: data 
    } 
} 

リデューサー：

export default function(state = INITIAL_STATE, action = {}) { 
    switch (action.type) { 
     case FETCH_LIST: 
      return { ...state, list: action.payload }; 
     default: 
      return state; 
    } 
} 

コンポーネント：

import React from 'react'; 
import { connect } from 'react-redux'; 
import { fetchList } from '../../actions/index.jsx'; 
export class DropdownList extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { res: null } 
     // this._fetchList = this._fetchList.bind(this); 
    } 

    componentWillMount() { 
     // this should fetch the data from Redux 
     this.props.fetchList(); 
     // so that when 
     console.log(this.props); 
     // I should see the values attached to the payload 
     // instead this is fetching the data from the API hit here 
     this._fetchList(); 
    } 

    // Here I'm hitting the API from the component 
    _fetchList() { 
     gapi.client.sheets.spreadsheets.values.get({ 
      spreadsheetId: FULL_LIST_ID, 
      range: ['LIST!A1:B'] 
     }).then((response) => { 
      this.setState({ res: response.result.values }); 
     }, (response) => { 
      throw response.result.error.message; 
     }); 
     } 

    _renderList() { 
     // this uses the values fetched locally  
     // return this.state.res.map((val, index) => {}); 
    } 

render() { 
    if (!this.state.res) { 
     return <div>Loading...</div>; 
    } 
    return (
     <div> 
       {this._renderList()} 
     </div> 
    ); 
    } 
} 


function mapStateToProps(state) { 
    return { list: state.list } 
} 

export default connect(mapStateToProps, { fetchList })(DropdownList); 

誰も私を助けることができていますか？ ありがとう

Answer 1

OK、解決済み！ これは同期の問題でしたので、私はAction CreatorでRedux-Thunkをミドルウェアとして使用する必要がありました。