CODEWITHSUNDEEP
reactjstypescriptredux
Twitter khuong291
Twitter khuong291

Reputation: 11672

Redux TypeScript can not map state to props

I follow redux tutorial in JavaScript but I can not map state to props when I write with TypeScript.

App.tsx:

import * as React from 'react';
import Todo from '../models/Todo';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import Main from './Main';

export interface State {
  todoList: Todo[];
  filterStatus: string;
  isAdding: boolean;
}

const defaultState: State = {
  todoList: [],
  filterStatus: 'SHOW_ALL',
  isAdding: false,
};

const reducer = (state: State = defaultState, action: {}) => {
  return state;
};

const store = createStore(reducer);

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Main />
      </Provider>
    );
  }
}

export default App;

Main.tsx: 

import * as React from 'react';
import { connect } from 'react-redux';
import { State } from './App';

class Main extends React.Component {
  render() {
    return (
      <div style={{ backgroundColor: 'red' }}>{this.props.filterStatus}</div>
    );
  }
}

function mapStateToProps(state: State) {
  return {
    filterStatus: state.filterStatus,
  };
}

export default connect(mapStateToProps)(Main);

it says:

[ts] Property 'filterStatus' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

Upvotes: 0

Views: 4101

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191729

You need to specify the typings for props for the component.

export interface MainProps {
  filterStatus: string;
}

class Main extends React.Component<MainProps>

Upvotes: 3

Related Questions