VS Default Bootstrapped React/Redux 应用程序：将 navMenu 连接到 redux 商店答案

【问题标题】：VS Default Bootstrapped React/Redux app: connect navMenu to redux storeVS Default Bootstrapped React/Redux 应用程序：将 navMenu 连接到 redux 商店
【发布时间】：2017-11-05 14:00:46
【问题描述】：

我从默认的 Visual Studio 模板创建了一个新的 React/Redux 应用程序，现在我想将 NavMenu 组件连接到 redux 商店，但不幸的是，在将 NavBar 连接添加到商店之后

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

布局组件

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>;
    }
}

现在抱怨

错误 TS2604 (TS) JSX 元素类型“NavMenu”没有任何构造或调用签名。

由于我是新来的 react/redux，即使在谷歌搜索之后我也找不到这个问题的答案，尽管这可能是一个简单的答案。

【问题讨论】：

标签： javascript reactjs typescript redux

【解决方案1】：

我相信你搞砸了 NavMenu 连接。我回答了类似的问题here。首先connect是一个泛型函数，你需要这样使用它：

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

此外，您的映射函数应如下所示：

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

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

希望这会有所帮助。

【讨论】：