Dispatch 不是减速机中的 function

Question

MY action

    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,

    }
}

In action.js i want to get data from my whether api and store in data, so i am using getstate to get data variable and assign data to it

My calender Component where i am connecting my callender to 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)

My 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)I am calling my action creator in callender.js file

2) Where i am using thunk middleware to get data,and store in data variable from redux store

3)I can't find the issue please help me

Answer 1

Your actions looks quite weird. The getData action creator disptaches fetchgetDataCall which dispatches fetchDataApi and that returns just some object { [data]: thunkdata} where property data are probably null in that moment. Hence there are not any properties type or data in your action object.

The second thing what your getData do is returning the object {type: actionTypes.GETDATA} , hence there is not any property data in your action object.

Try to do it something like this (updated according to @mbojko answer):

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
            })
        })
    }
}

Answer 2

Compare your function signature

export const getData = (dispatch) => {

With how you call it:

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

The argument is missing (therefore dispatch is not defined and obviously not a function).

Should be dispatch(getData(dispatch)) , probably.