Javascript 使用Google Sheet API v4的React/Redux未获取数据

我一直在制作一个应用程序，它使用Google Sheet 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);

从“React”导入React；
从'react redux'导入{connect}；
从“../../actions/index.jsx”导入{fetchList}；
导出类DropdownList扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={res:null}
//this.\u fetchList=this.\u fetchList.bind（this）；
}
组件willmount（）{
//这应该从Redux获取数据
this.props.fetchList（）；
//所以当
console.log（this.props）；
//我应该看到附加到有效载荷的值
//相反，这是从这里命中的API获取数据
这是。_fetchList（）；
}
//在这里，我从组件中访问API
_fetchList（）{
gapi.client.sheets.spreadsheets.values.get({
电子表格ID：完整列表ID，
范围：['LIST！A1:B']
})。然后（（响应）=>{
this.setState（{res:response.result.values}）；
}，（回应）=>{
抛出response.result.error.message；
});
}
_renderList（）{
//这将使用本地获取的值
//返回这个.state.res.map（（val，index）=>{}）；
}
render（）{
如果（！this.state.res）{
返回装载。。。；
}
返回(
{this.\u renderList（）}
);
}
}
函数MapStateTops（状态）{
返回{list:state.list}
}
导出默认连接（mapstatetops，{fetchList}）（DropdownList）；

有人能帮我吗？ 谢谢

好的，解决了！ 这是一个同步问题，所以我需要在Action Creator中使用Redux Thunk作为中间件