0
votes

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;

Screenshots of a closer look: Image

Image

1
Please make sure to follow the rules by only presenting a minimal, complete and verifiable example: stackoverflow.com/help/mcveNoel Widmer

1 Answers

1
votes

Are you importing the right component? In App.tsx you have

import Crystal from './components/Crystal';

Should it not be

import Crystal from './containers/Crystal';

It looks like you aren't using the container component and are instead using the presentational one