(React Redux TS) Property 'system' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'

Viewed 306

I'm trying to pass properties to my component but compiler returns error. I read couple of articles and issues like this on stackoverflow, but most of them refer to lack of props definition. I defined interface with definition of my custom props, that's why I'm asking for help. I suppose there is something wrong with Typing.

Here is some of my code:

index.tsx

import React from 'react';
import { render } from 'react-dom';
import './index.module.css';
import App from './components/App';
import { Provider } from 'react-redux';
import configureStore from './store';

const store = configureStore();

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'),
);

App.tsx

import React, { Component, ReactNode } from 'react';
import styles from './App.module.css';
import Login from './Login';
import { MuiThemeProvider } from '@material-ui/core/styles';
import { theme } from '../theme';
import Home from './Home';
import { connect } from 'react-redux';
import { AppState } from '../store';
import { SystemState } from '../store/system/types';

export interface AppProps {
    system: SystemState;
}

class App extends Component<AppProps> {
    constructor(props: AppProps) {
        super(props);
    }

    render(): ReactNode {
        return (
            <MuiThemeProvider theme={theme}>
                <div className={styles.App}>
                    {!this.props.system.isAuthenticated && <Login />} //error
                    {this.props.system.isAuthenticated && <Home />} //error
                </div>
            </MuiThemeProvider>
        );
    }
}

const mapStateToProps = (state: AppState): AppProps => ({
    system: state.system,
});

export default connect<AppProps, {}, {}, AppState>(mapStateToProps)(App);

index.ts

import { createStore, combineReducers, applyMiddleware, Store } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { systemReducer } from './system/reducers';
import { StateType } from 'typesafe-actions';

const rootReducer = combineReducers({
    system: systemReducer,
});

export type AppState = StateType<ReturnType<typeof rootReducer>>;

export default function configureStore(): Store {
    const middlewares = [thunkMiddleware];
    const middleWareEnhancer = applyMiddleware(...middlewares);

    const store = createStore(rootReducer, composeWithDevTools(middleWareEnhancer));

    return store;
}

How can I declare my props to make them work?

0 Answers
Related