Redux Connect с ошибкой машинописного текста

Я внедряю redux в новый проект, и все шло хорошо, пока я не подключил приложение с помощью connect()(App). Я получаю следующую ошибку Typescript и не могу понять, как ее правильно ввести.

(13,16): Property 'dispatch' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'.

Ниже приведен код моего приложения.

import * as React from 'react';
import { connect } from 'react-redux';
import { handleInitialData } from '../../actions/shared';


import './App.css';

const logo = require('./logo.svg');

class App extends React.Component {
  
  componentDidMount() {
    this.props.dispatch(handleInitialData());
  }

  render() {
    return (
      <div className = "App">
        <header className = "App-header">
          <img src = {logo} className = "App-logo" alt = "logo" />
          <h1 className = "App-title">Welcome to React</h1>
        </header>
        <p className = "App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default connect()(App);

reactjs typescript redux

01.04.2018 21:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

387

Ответы 1

Из кода я обнаружил, что

this.props.dispatch(handleInitialData()); // this wont work

function mapDispatchToProps(dispatch){
    return bindActionCreators({  // please import bindActionCreators from redux
       // here you write your actions
         dispatch: handleInitialData 
    },dispatch)
}



function mapStateToProps(state){
    return {
               //redux state
    }
}



export default connect(mapStateToProps, mapDispatchToProps)(App);

Спасибо за ответ, но это не решает проблемы с машинописным текстом.

— 02.04.2018 13:58

вместо использования this.props.dispatch (handleInitialData ()); используйте this.props.dispatch (); после изменения кода

— 02.04.2018 16:01

02.04.2018 09:26