frontEndNoob frontEndNoob - 5 months ago 24
TypeScript Question

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

My problem is function "connect" has no wrap my App-component, therefore Redux doesn't work.

I tryed clone some repositories with react+redux+typescript - there are all works, and mine application not.

And therefore I can't catch props (user) in my App.

I think my user.ts file is not correct, but it's not important now, I mean problem is not there :)

In typescript compiler (webpack) and browser console have not any errors.

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"

Answer Source

Here is the error:

index.ts:

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

App.tsx:

export class App;

The App you are rendering is not connected, because only default export is connected. Try changing it to

index.ts:

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