Take this for example:
Assuming that the functions are all binded and everything
HalloweenCandyComponent.js
fetchHalloweenCandy() {
this.props.getHalloweenCandy()
}
actions.js
getHalloweenCandy(){
return (dispatch) => {
const request = axios.get('http://halloweencandy.com/all');
request.then(function(response){
console.log(response.data);
return disatch({
type: GET_ALL_HALLOWEEN_CANDY,
payload: response.data
})
})
}
}
At this point, when I console.log(response.data) I am returned with an array of objects as I should. Meaning, everything is working as expected.
Next, I want to update the HalloweenCandyComponent's state, and fill it with all the halloween candy. Hence, we are going to want to send this information to our reducers.
reducers/halloweencandy.js
export default function(state = [], action) {
switch(action.type){
case GET_ALL_HALLOWEEN_CANDY:
console.log(action.payload);
return [...state,
Object.assign({}, action.payload)
];
default:
return state;
}
}
This is where I am getting tossed. console.log(action.payload) doesn't return anything. It will just be empty.
Another thing that I can't seem to figure out is... passing values to my actions. For example...
fetchHalloweenCandyByQuery(search){
this.props.getHalloweenCandyByQuery(search);
}
Then in my actions... it always comes up as undefined... until many seconds later... (I tested that by doing a setTimeOut function...) But the point is I don't want to deal with that. I am using thunk, I am hoping that isn't the issue, but can't I have it so when the response is ready, it can execute, instead of giving me undefined values?! Kinda like a callback? Sorry if this is a stupid question, but I tried looking at the react-redux-async library and these but I am lost.
