CODEWITHSUNDEEP
reactjstypescriptredux
Ravi Singh
Ravi Singh

Reputation: 1119

how can my call the action in my component using typescript with react redux?

it shows me error every time whenever i call my action from my component. I'm using typescript with react redux.

Error : Property 'getItem' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.

MY Action

import * as actionTypes from "../types";
import { getItems } from "../api/allApi";

export const getItem = () => {
  const payload = getItems();

  return {
    type: actionTypes.GET_ITEM,
    payload
  };
};

My Component

import React from "react";
import "../styles/settings.scss";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getItem } from "../Actions/action";

class Settings extends React.Component {
  componentDidMount() {
    this.props.getItem(); // error here: Property 'getItem' does not exist on //type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.ts(2339)
  }
  render() {
    return (
      <div>

              {console.log(this.props.items)} // Error here: Property 'items' //does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'
              {/* {console.log("asda", this.props.items)} */}
       </div>
    );
  }
}

const mapStateToProps = (state: any) => {
  return {
    items: state.getItemsReducer
  };
};

const mapDispatchToProps = (dispatch: any) => {
  return bindActionCreators({ getItem }, dispatch);
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Settings);

Upvotes: 1

Views: 1667

Answers (2)

manish.singh
manish.singh

Reputation: 46

You should create the interfaces for props (and state) for the component Settings.

interface ISettingsProps { 
  items: [] | {} //whatever may be the datatype.
  getItem(): void
}

And pass it to the class like this

class Settings extends React.Component<ISettingsProps> {...}

Upvotes: 0

user10104341
user10104341

Reputation:

You need to create Props and pass them to your component. This props should include getItms: Function. You are telling the component to render s children collection he doesn't know exist.

You can do it like so:

export interface IProps {getItems: Function, Items:any[]} //See if you can figure out the type here

export class ComponentName extends Component<IProps, {}> {
 ...rest of the code here
}

Upvotes: 2

Related Questions