TypeScript complaining about component missing properties which are injected by redux

user_13592982 0
Viewed 418

I am new to both typescript and Redux. I am using Redux to inject properties(state) into a component. When I render the component I don't pass it any props since they're injected by redux so it complains the props are missing. When I hover over <RelatedFilesTableContainer/> I see the below error message. Thanks for any help!

Exact Error: (TS) Type '{}' is missing the following properties from type 'IReportStore': showOrphaned, filters, filterFile

import * as React from "react";
import { RouteComponentProps } from "react-router";
import RelatedFilesTableContainer from "@Components/reportView/RelatedFilesTable";

type Props = RouteComponentProps<{}>;

const ReportPage: React.FC<Props> = () => {
    return <div>
        <RelatedFilesTableContainer />
    </div>;
}

export default ReportPage;

Component being rendered is below

import React from "react"
import { Container, Table } from "react-bootstrap";
import CheckBoxContainer from "@Components/reportView/Checkbox"
import ReportTableHeader from "@Components/reportView/ReportTableHeader";
import CollapsibleRow from "@Components/reportView/CollapsibleRow";
import * as reportStore from "@Store/reportStore";
import { withStore } from "@Store/index";

let renderCollapsibleRows = (filterFile: Object) => {
    let collapsibleRows = [];
    console.log(filterFile.RelatedFiles);
    filterFile.RelatedFiles.forEach(relatedFile => collapsibleRows.push(<CollapsibleRow rowData={relatedFile}/>));
    return collapsibleRows;
}

type Props = reportStore.IReportStore;
const RelatedFilesTable: React.FC<Props> = ({ filterFile }) => {
    return (
        <Container>
            <div className="d-flex justify-content-between">
                <p>{filterFile.FilterFileName}</p>
                <CheckBoxContainer />
            </div>
            <Table striped bordered hover>
                <ReportTableHeader />
                <tbody>{renderCollapsibleRows(filterFile)}</tbody>
            </Table>
        </Container>
    )
}

// Connect component with Redux store.
var RelatedFilesTableContainer = withStore(
    RelatedFilesTable,
    state => state.report, // Selects which state properties are merged into the component's props.
    reportStore.actionCreators, // Selects which action creators are merged into the component's props.
);

export default RelatedFilesTableContainer
redux typescript reactjs
1 Answers

You want your Props definition to also include typings for props injected by redux (using the withState function). You can do this by breaking out separate mapStateToProps and mapDispatchToProps functions, and inferring Props based on this like so:

const mapStateToProps = (state) => state.report;
const mapDispatchToProps = reportStore.actionCreators;

type Props = reportStore.IReportStore &
  ReturnType<typeof mapStateToProps> &
  typeof mapDispatchToProps;

const RelatedFilesTable: React.FC<Props> = ({filterFile}) => { ... }

var RelatedFilesTableContainer = withStore(
  RelatedFilesTable,
  mapStateToProps,
  mapDispatchToProps,
);

export default RelatedFilesTableContainer;
user_12005140
Related