0

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"

1 Answer 1

2

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";
Sign up to request clarification or add additional context in comments.

1 Comment

Useful reading about modules in ES6 2ality.com/2014/09/es6-modules-final.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.