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)

我的减速机

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文件中呼叫我的动作创建者

2）我在哪里使用thunk中间件获取数据，并将其存储在redux存储的data变量中

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

Answer 1

您的动作看起来很奇怪。 getData动作创建者分配了fetchgetDataCall，该调度程序调度fetchDataApi并仅返回某个对象{ [data]: thunkdata}，此时属性data可能为空。因此，您的操作对象中没有任何属性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
            })
        })
    }
}

Answer 2

比较您的功能签名

export const getData = (dispatch) => {

如何称呼它：

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

缺少参数（因此dispatch未定义，显然不是函数）。

应该是dispatch(getData(dispatch))。

调度不是减速器中的功能

2 个答案: