Been trying to figure this out for the past 2-3 hours. The app starts from running on the browser and displays the error that this.props.fetchAPOD is not a function (screenshots at the far bottom) but it clearly is in my action creator. Also in my container it says the error that "Argument of type 'typeof "C:/Users/pfftd/projectcrystal/src/actions/crystalActions"' is not assignable to parameter of type 'ActionCreatorsMapObject' when I assign the actions to mapDisPatchToProps (which is the same EXACT code I see in Microsoft's react/typescript start-kit guide: https://github.com/Microsoft/TypeScript-React-Starter
Here is my code:
container Crystal.tsx
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Crystal from '../components/Crystal';
import * as actions from '../actions/crystalActions';
import {
ApodSTATE
} from '../types';
export function mapStateToProps({ APOD }: ApodSTATE ) {
return {
APOD
};
}
export function mapDispatchToProps( dispatch: any ) {
return bindActionCreators( actions, dispatch );
}
export default connect( mapStateToProps, mapDispatchToProps )( Crystal );
App.tsx (file that contains the store and the provider)
import * as React from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import allReducers from './reducers';
import Crystal from './components/Crystal';
// import { ApodSTATE } from './types';
const logger = createLogger({
level: 'info',
collapsed: true
});
const store: any = createStore(allReducers, applyMiddleware(thunk, logger));
class App extends React.Component<any, any> {
render() {
return (
<Provider store={store}>
<Crystal />
</Provider>
);
}
}
export default App;
crystalActions.tsx
export const FETCH_APOD = 'FETCH_APOD';
export type FETCH_APOD = typeof FETCH_APOD;
export interface FetchApod { type: FETCH_APOD };
export const fetchAPOD = () => {
return ( dispatch: any ) => {
dispatch({
type: FETCH_APOD
});
};
};
types (index.tsx)
export interface TableName {
TableName: string;
}
export interface ApodACTIONS {
type: string;
fetchAPOD?: () => {};
};
export interface ApodSTATE {
APOD: {};
}
export enum actionTypes {
FETCH_APOD
}
component Crystal.tsx
import * as React from 'react';
// import { ApodSTATE } from '../types';
class Crystal extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.printTest = this.printTest.bind(this);
}
componentDidMount() {
this.printTest();
this.props.fetchAPOD();
}
printTest() {
setTimeout(() => {
console.log(this.props);
}, 1500);
}
render() {
return (
<div>
<h2>Project Crystal initiation</h2>
<h3>Test</h3>
</div>
);
}
}
export default Crystal;