不工作在打字稿+ redux連接到組件

Question

我的問題是功能「連接」沒有包裝我的應用程序組件，因此Redux不起作用。

我嘗試用react + redux + typescript克隆一些存儲庫 - 有所有的作品，而我的應用程序沒有。

因此，我不能在我的應用程序中捕捉道具（用戶）。

我覺得我user.ts文件是不正確的，但現在已經不是很重要，我的意思是問題是不是有:)

在打字稿編譯器（的WebPack）和瀏覽器控制檯沒有任何錯誤。

index.ts：

import * as React from "react"; 
 
import * as ReactDOM from "react-dom"; 
 
import {App} from "./components/App/App"; 
 
import {Provider} from "react-redux"; 
 
import rootReducer from "./reducers/index"; 
 
import {createStore, Store} from "redux"; 
 

 
const initialState = {}; 
 

 
const store: Store<any> = createStore(rootReducer, initialState); 
 

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

App.tsx：

import * as React from "react"; 
 
import {connect} from "react-redux"; 
 

 
export interface AppProps{ 
 
    user?: any; 
 
} 
 

 
export class App extends React.Component<AppProps, {}> { 
 
    render() { 
 
     console.log(this.props); 
 

 
     return <div> 
 
      <h1>hello</h1> 
 
     </div> 
 
    } 
 
} 
 

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

 
export default connect<{}, {}, AppProps>(mapStateToProps)(App as any)

個

根減速器index.ts：

import { combineReducers } from 'redux' 
 
import user from './user' 
 

 
const rootReducer = combineReducers({ 
 
    user 
 
}); 
 

 
export default rootReducer;

用戶減速器user.ts：

import { handleActions } from 'redux-actions'; 
 

 
export interface UserModel{ 
 
    id: number; 
 
    name: string; 
 
} 
 

 
const initialState: UserModel = { 
 
    id: null, 
 
    name: null 
 
}; 
 

 
export default handleActions<UserModel, {}>({ 
 
    ['ACTION']:(): UserModel => { 
 
    return { 
 
     id: 123, 
 
     name: 'firstname' 
 
    }; 
 
    } 
 
}, initialState);

二手Node.js的模塊及其版本：

"dependencies": { 
"@types/jquery": "^3.2.4", 
"@types/lodash": "^4.14.66", 
"@types/react": "^15.0.29", 
"@types/react-dom": "^15.5.0", 
"@types/react-props-decorators": "^0.1.29", 
"@types/react-redux": "^4.4.45", 
"@types/react-router": "^4.0.11", 
"@types/react-router-dom": "^4.0.4", 
"@types/redux": "^3.6.0", 
"@types/redux-actions": "^1.2.6", 
"autoprefixer": "^7.1.1", 
"awesome-typescript-loader": "^3.1.3", 
"jquery": "^3.2.1", 
"jsx-loader": "^0.13.2", 
"lodash": "^4.17.4", 
"react": "^15.5.4", 
"react-dom": "^15.5.4", 
"react-jsx": "^1.0.0", 
"react-prop-types": "^0.4.0", 
"react-redux": "^5.0.5", 
"react-router": "^4.1.1", 
"react-router-dom": "^4.1.1", 
"redux": "^3.7.0", 
"redux-actions": "^2.0.3", 
"source-map-loader": "^0.2.1", 
"url-loader": "^0.5.9", 
"webpack": "^2.6.1" 

"devDependencies": { 
"@types/node": "^7.0.27", 
"css-loader": "^0.28.4", 
"extract-text-webpack-plugin": "^2.1.0", 
"path": "^0.12.7", 
"postcss-loader": "^2.0.6", 
"react": "^15.5.4", 
"react-dom": "^15.5.4", 
"react-jsx": "^1.0.0", 
"style": "0.0.3", 
"style-loader": "^0.18.2", 
"stylus": "^0.54.5", 
"stylus-loader": "^3.0.1", 
"ts-loader": "^2.1.0", 
"typescript": "^2.3.4" 

Answer 1

以下是錯誤：

index.ts：

import {App} from "./components/App/App"; 

App.tsx：

export class App; 

您正在呈現的應用程序未連接，因爲只連接了默認導出。嘗試將其更改爲

index.ts：

import App from "./components/App/App";