首页 文章

不要工作redux连接到typescript中的组件反应

提问于
浏览
0

我的问题是函数“connect”没有包装我的App组件,因此Redux不起作用 .

我尝试使用react redux打字稿克隆一些存储库 - 有所有工作,而我的应用程序没有 .

因此,我无法在我的应用程序中捕获道具(用户) .

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

在typescript编译器(webpack)和浏览器控制台中没有任何错误 .

enter image description here

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

Used Node.js modules and their versions:

"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"

1 回答

  • 2

    这是错误:

    index.ts:

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

    App.tsx:

    export class App;
    

    您正在渲染的应用程序未连接,因为仅连接了默认导出 . 尝试将其更改为

    index.ts:

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

相关问题