javascript - Dispatch不是reducer中的函数

Question

我的行动

    const fetchDataApi = (getState) => {
        let { data } = getState()
        return axios.get('http://api.openweathermap.org/data/2.5/weather?q=london,uk&appid=26aacf43db7ecfa2ecd85500eaee9920').then(thunkdata => {
            console.log(thunkdata)
            return {
                [data]: thunkdata
            }
        })
    }

const fetchgetDataCall = () => {
    return (dispatch, getState) => {
        return dispatch(fetchDataApi(getState))
    }

}


export const getData = (dispatch) => {
    dispatch(fetchgetDataCall())
    return {
        type: actionTypes.GETDATA,

    }
}

在action.js中，我想从我的api获取数据并将其存储在数据中，因此我使用getstate来获取数据变量并向其分配数据

我的日历组件，我将我的调用者连接到actionType

import React, { Component } from 'react';
// import 'moment/locale/it.js';
import { DatePicker, DatePickerInput } from 'rc-datepicker';
// import { ca } from 'date-fns/esm/locale';
import 'rc-datepicker/lib/style.css';


import { connect } from 'react-redux';
import  { getData } from '../store/actions/actions'

const date = '2015-06-26' // or Date or Moment.js


class Callender extends Component {
    //These is a method  es7

    onChangeandler = (jsDate, dateString, event) => {
        // event.preventDefault()
        console.log("[we are lokking at js date]",jsDate);
        this.props.getWether();
        console.log("[we are seeing the props storeDta]",this.props.storeData);

    }

    //Next method 

    render() {
        return (
            <div>
                <DatePicker onChange={this.onChangeandler} value={date} />
            </div>
        )
    }
}

const mapStateToProps = state  =>({
    storeData: state.data
})

const mapDispatchToProps = (dispatch)  =>({
    getWether: () => dispatch(getData())
})

export default connect(mapStateToProps,mapDispatchToProps)(Callender)

我的 reducer

import  * as actionType from '../actions/actionTypes';

    const intialState ={
        time:null,
        day:null,
        data:null
    }

    // reducer 
    const reducer = (state=intialState, action) =>{
        switch(action.type){
            case actionType.GETDATA:
                return {
                    ...state,
                    data:action.data
                }
            case actionType.POSTDATA:
                return {
                    ...state
                }
            default : 
              return {
                  ...state
              }

        }
    }


    export default  reducer;

actionTypes.js

export const  POSTDATA="POSTDATA";
export const GETDATA = "GETDATA";

1)我正在 callender.js 文件中调用我的 Action 创建者

2)我使用 thunk 中间件来获取数据，并将数据存储在 redux 存储中的数据变量中

3)我找不到问题，请帮助我

Answer 1

你的行为看起来很奇怪。 getData 操作创建者调度 fetchgetDataCall，后者调度 fetchDataApi 并仅返回一些对象 { [data]: thunkdata}此时属性 data 可能为 null。因此，您的操作对象中没有任何属性 type 或 data。

您的getData所做的第二件事是返回对象{type: actionTypes.GETDATA}，因此没有任何属性data在你的操作对象中。

尝试这样做(根据@mbojko答案更新):

const getData = () => {
    return (dispatch) => {
        return axios.get('http://api.openweathermap.org/data/2.5/weather?q=london,uk&appid=26aacf43db7ecfa2ecd85500eaee9920').then(thunkdata => {
            return dispatch({
                type: actionTypes.GETDATA,
                data: thunkdata
            })
        })
    }
}