Question

我已经从默认的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元素类型＆＃39; NavMenu＆＃39;没有任何构造或呼叫签名。

因为即使在googeling周围我也很想做出反应/ redux我无法找到这个问题的答案，尽管这可能是一个简单的答案。

Answer 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)),
});

希望这有帮助。

VS Default Bootstrapped React / Redux app：将navMenu连接到redux store

1 个答案: