VS Default Bootstrapped React / Redux应用程序：将navMenu连接到redux存储

Question

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

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'没有任何构造或调用签名。

而且由于我是刚开始反应/ redux的新手，即使在四处闲逛之后，我也找不到这个问题的答案，尽管这可能是一个简单的答案。

Answer 1

我相信您搞砸了NavMenu连接。 我在这里回答了类似的问题。 首先， 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)),
});

希望这可以帮助。