不要使用 redux 连接到打字稿中的组件 + 反应

Question

我的问题是函数 "connect" 没有包装我的应用程序组件，因此 Redux 不工作。

我尝试使用 react+redux+typescript 克隆一些存储库 - 所有的都可以，但我的应用程序不行。

因此我无法在我的应用程序中捕获道具（用户）。

我认为我的 user.ts 文件不正确，但现在不重要，我的意思是问题不存在:)

在 typescript 编译器（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)

root reducer 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;

您渲染的App没有连接，因为只连接了default export。尝试将其更改为

index.ts:

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

不要使用 redux 连接到打字稿中的组件 + 反应

Don't work redux connect to component in typescript + react

connect

typescript

reactjs

redux

react-redux