I’m working on learning Redux and I am attempting to store data from the NASA picture of the day API in Redux store rather than storing it in the React component’s local state. I’ve followed a few tutorials but can’t seem to get this working.
Here is the tutorial I am following along with’s Github repo
A lot of it seems straight forward but I am getting an error when trying to use this.props.dispatch(). I get a “not a function” error.
Here is my project. The relevant Redux files are in the client/src/actions and client/src/reducers folders plus the index.js, store.js, and PictureOfTheDay component.
Here is the chunk of code with the error in PictureOfTheDay.js
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {fetchPOD} from './actions/pod-action';
connect((store) => {
return {
pod: store.podData
};
})
export default class PictureOfTheDay extends Component {
componentWillMount() {
this.props.dispatch(fetchPOD());
}
render() {
const {pod} = this.props;
return (
<div>
{pod}
</div>
)
}
}
Where am I going wrong here? I have a feeling it’s an issue using connect().