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
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
})
})
}
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.