VS Default Bootstrapped React/Redux app: connect navMenu to redux store

Question

I have created a new React/Redux app from the default Visual Studio Template and now I want to connect the NavMenu component to the redux store, but unfortunately, after adding the NavBar-connection to the store

export default connect(
    (state: ApplicationState) => state.applicationUser,
    ApplicationUser.actionCreators
)(NavMenu) as typeof NavMenu;

the Layout component

export class Layout extends React.Component<{}, {}> {
    public render() {
        return <div className='container-fluid'>
            <div className='row'>
                <div className='col-sm-3'>
                    <NavMenu />
                </div>
                <div className='col-sm-9'>
                    { this.props.children }
                </div>
            </div>
        </div>;
    }
}

now complains

Error TS2604 (TS) JSX element type 'NavMenu' does not have any construct or call signatures.

and as I am new to react / redux even after googeling around I can't find an answer to this problem, although this might be an easy answer.

Kacper Wiszczuk Kacper Wiszczuk · Accepted Answer · 2017-11-05T14:23:25

I believe you messed up you NavMenu connect. I answered similar question here. First of all, connect is a generic function and you need to use it like this:

const ConnectedComponent = connnect<StateProps, DispatchProps>(
  mapStateToProps,
  mapDispatchToProps,
)(MyComponent);

Additionally your mapping functions should look like this:

const mapStateToProps = (state: AppState): StateProps => ({
  foo: state.bar,
});

const mapDispatchToProps = (dispatch: Dispatch<ActionType>): DispatchProps => ({
  addFoo: (name: string) => dispatch(addFoo(name)),
});

Hope this helps.

VS Default Bootstrapped React/Redux app: connect navMenu to redux store

1 Answers