Typescript react redux - 連接出錯

Question

初學者和JavascriptServices站點的使用Typescript和React/Redux的其他模式。

礦是React Redux項目。

我有一個顯示一個菜單，是從JavascriptServices樣板提供名爲「NavMenu.tsx」很大程度上保持不變

我想用幾個狀態變量的「IsAuthorised」 &「用戶名」的菜單TSX文件。這些都處於還原狀態，我想只使用它們不設置它們等。

我在底部的連接語句上獲得以下錯誤，特別是（NavMenu）是紅色下劃線的，不知道如何解決這個錯誤？

[TS] 參數類型的 '的typeof NavMenu' 不是分配給類型的參數 '成分& LoginState>'。 類型'typeof NavMenu'不可分配爲鍵入'StatelessComponent & LoginState>'。 類型'typeof NavMenu'不提供匹配的簽名'（道具：DispatchProp & LoginState & {children？：ReactNode;}，context ?: any）：ReactElement'。

下面是NavMenu類的代碼 - 錯誤是在最後一行：

import * as React from "react"; 
    import { NavLink, Link } from "react-router-dom"; 
    import { 
    Navbar, 
    Nav, 
    NavItem, 
    NavDropdown, 
    MenuItem, 
    Glyphicon 
    } from "react-bootstrap"; 
    import { LinkContainer } from "react-router-bootstrap"; 
    import { connect } from "react-redux"; 
    import { ApplicationState } from "../store"; 
    import * as LoginState from "../store/Login"; 

    // At runtime, Redux will merge together... 
    type NavMenuProps = LoginState.LoginState; 

    export class NavMenu extends React.Component<NavMenuProps, {}> { 
    public render() { 
     return (
     <div className="main-nav"> 
      <div className="navbar navbar-inverse"> 
      <div className="navbar-header"> 
       <button 
       type="button" 
       className="navbar-toggle" 
       data-toggle="collapse" 
       data-target=".navbar-collapse" 
       > 
       <span className="sr-only">Toggle navigation</span> 
       <span className="icon-bar" /> 
       <span className="icon-bar" /> 
       <span className="icon-bar" /> 
       </button> 
       <Link className="navbar-brand" to={"/"}> 
       JobsLedger_API 
       </Link> 
      </div> 
      <div className="clearfix" /> 
      <div className="navbar-collapse collapse"> 
       <ul className="nav navbar-nav"> 
       <li> 
        <NavLink exact to={"/"} activeClassName="active"> 
        <span className="glyphicon glyphicon-home" /> Home 
        </NavLink> 
       </li> 
       <li> 
        <NavLink to={"/counter"} activeClassName="active"> 
        <span className="glyphicon glyphicon-education" /> Counter 
        </NavLink> 
       </li> 
       <li> 
        <NavLink to={"/fetchdata"} activeClassName="active"> 
        <span className="glyphicon glyphicon-th-list" /> Fetch data 
        </NavLink> 
       </li> 
       </ul> 
      </div> 
      </div> 
     </div> 
    ); 
    } 
    } 

    export default connect(
    (state: ApplicationState) => state.login // Selects which state properties are merged into the component's props 
)(NavMenu) as typeof NavMenu; 

編輯

我注意到的第一個評論，但需要有人來擴展它。

下面是我在JavascriptServices示例中關注的文件。我按照他們的連接語法..沒有mapStateToProps在這個例子中提到...

這就是：

  import * as React from 'react'; 
     import { Link, RouteComponentProps } from 'react-router-dom'; 
     import { connect } from 'react-redux'; 
     import { ApplicationState } from '../store'; 
     import * as WeatherForecastsState from '../store/WeatherForecasts'; 

     // At runtime, Redux will merge together... 
     type WeatherForecastProps = 
      WeatherForecastsState.WeatherForecastsState  // ... state we've requested from the Redux store 
      & typeof WeatherForecastsState.actionCreators  // ... plus action creators we've requested 
      & RouteComponentProps<{ startDateIndex: string }>; // ... plus incoming routing parameters 

     class FetchData extends React.Component<WeatherForecastProps, {}> { 
      componentWillMount() { 
       // This method runs when the component is first added to the page 
       let startDateIndex = parseInt(this.props.match.params.startDateIndex) || 0; 
       this.props.requestWeatherForecasts(startDateIndex); 
      } 

      componentWillReceiveProps(nextProps: WeatherForecastProps) { 
       // This method runs when incoming props (e.g., route params) change 
       let startDateIndex = parseInt(nextProps.match.params.startDateIndex) || 0; 
       this.props.requestWeatherForecasts(startDateIndex); 
      } 

      public render() { 
       return <div> 
        <h1>Weather forecast</h1> 
        <p>This component demonstrates fetching data from the server and working with URL parameters.</p> 
        { this.renderForecastsTable() } 
        { this.renderPagination() } 
       </div>; 
      } 

      private renderForecastsTable() { 
       return <table className='table'> 
        <thead> 
         <tr> 
          <th>Date</th> 
          <th>Temp. (C)</th> 
          <th>Temp. (F)</th> 
          <th>Summary</th> 
         </tr> 
        </thead> 
        <tbody> 
        {this.props.forecasts.map(forecast => 
         <tr key={ forecast.dateFormatted }> 
          <td>{ forecast.dateFormatted }</td> 
          <td>{ forecast.temperatureC }</td> 
          <td>{ forecast.temperatureF }</td> 
          <td>{ forecast.summary }</td> 
         </tr> 
        )} 
        </tbody> 
       </table>; 
      } 

      private renderPagination() { 
       let prevStartDateIndex = (this.props.startDateIndex || 0) - 5; 
       let nextStartDateIndex = (this.props.startDateIndex || 0) + 5; 

       return <p className='clearfix text-center'> 
        <Link className='btn btn-default pull-left' to={ `/fetchdata/${ prevStartDateIndex }` }>Previous</Link> 
        <Link className='btn btn-default pull-right' to={ `/fetchdata/${ nextStartDateIndex }` }>Next</Link> 
        { this.props.isLoading ? <span>Loading...</span> : [] } 
       </p>; 
      } 
     } 

     export default connect(
      (state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props 
      WeatherForecastsState.actionCreators     // Selects which action creators are merged into the component's props 
     )(FetchData) as typeof FetchData; 

Answer 1

假人是正確的。每終極版文檔：

[mapStateToProps（州，[ownProps]）：stateProps]（功能）：如果使用該參數，新組件將訂閱終極版商店更新。這意味着任何時候商店更新時，都會調用mapStateToProps。 mapStateToProps的結果必須是一個普通對象，它將被合併到組件的道具中。如果您不想訂閱商店更新，請傳遞null或undefined來代替mapStateToProps。

在mapStateToProps你映射終極版商店的部分本地prop您需要定義。大多數mapStateToProps調用看起來是這樣的：

const mapStateToProps = (state) => { 
    return { 
     login: state.login 
    }; 
}; 

現在proplogin被映射到你的終極版商店login值。我對上述代碼同樣感到困惑，因爲state.weatherForecasts沒有被分配給任何prop，因此不應該被訪問。我看到他們使用稱爲forecasts的道具，但不可能從他們的interface定義中知道該prop是從父母傳下來還是應該是他們store的一部分。我堅持以上述方式使用mapStateToProps - 它在社區中非常標準，並且與TS一致。