不要在 typescript + React 中使用 redux 连接到组件

Question

我的问题是函数“connect”没有包装我的应用程序组件，因此 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)

根减速器索引.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;

你渲染的App没有连接，因为只连接了默认导出。尝试更改为

index.ts：

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