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

Question

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);

Also, it would be good to not leave a lot of any's. For example the return type of mapStateToProps is IProps or Partial<IProps>, if you decide to populate with more props. Also, it's state should be state:{ getItemsReducer: soneType[]}. Not sure about the actual output but you can figure it out... — user10104341
– user10104341, Commented Aug 17, 2019 at 12:57

score 2 · Accepted Answer · 2019-08-17 12:58:44Z

2

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
}

edited Aug 17, 2019 at 12:58

answered Aug 17, 2019 at 12:53

user10104341

Sign up to request clarification or add additional context in comments.

2 Comments

Ravi Singh Over a year ago

THANKS @Dimitris now i can call my action any also im getting the data from api in my console as well but now i'm not getting the data to render in the screen. how can i get access the data from the api for expample a Object and want to access its child array of Object.

user10104341 Over a year ago

If this.props.items, is printed in the console, you should be able to use it in your render method the same way. Now, depending what the items is (Object or Array of Objects), you can just map through them. For example: this.props.items.map(item => do something here). You should be able to print it in the screen. Just make sure, that you pass a key as well. Possible the index of the items, or something else unique..

manish.singh · Accepted Answer · 2019-08-17 13:09:28Z

0

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> {...}

edited Aug 17, 2019 at 13:09

answered Aug 17, 2019 at 12:48

manish.singh

463 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related