Question

我对React有一定的经验，但是对使用Redux来说是新手。但是，Visual Studio 2017在 .NET Core 2.0 下具有内置的 React + Redux 模板。

我的环境的一些信息：

Visual Studio 2017
反应15.6.1
打字稿2.4.1
redux 3.7.1
react-redux 5.0.5

该项目为我设置了所有内容，到目前为止，我可以很好地运行它。

我只有一个简单的问题。请检查这张图片->

当我点击计数器按钮

它应该更新计数器（默认情况下由asp.net完成）
“ WebApplication10”标题旁边应显示相同的数字

例如： WebApplication10（3）

此尝试的目标是了解如何从整个不同的组件访问redux存储。

我在 NavMenu 组件上尝试了以下操作：

type CounterProps =
    CounterStore.CounterState
    & typeof CounterStore.actionCreators
    & RouteComponentProps<{}>;

并像这样修改类定义行

export class NavMenu extends React.Component<CounterProps, {}> {
    public render() {
        return <div>//rest of the code</div>;
    }
}

这样做只会给我一个小错误：

ERROR in [at-loader] ./ClientApp/components/Layout.tsx:9:21 
TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavMenu> & Readonly<{ children?: ReactNode; }> & R...'.

我希望您理解我的问题，如果我没有提供解决此问题的所有细节，请原谅。如果您还有其他需要，请告诉我。

感谢您的阅读。最好的问候。

Answer 1

由于我们需要将容器组件包装在原始NavMenu周围，所以最直接的方法是将原始NavMenu重命名为NavMenuComponent

class NavMenuComponent extends React.Component<CounterProps, {}> {
    public render() {
        return <div className='main-nav'>
                <div className='navbar navbar-inverse'>
                <div className='navbar-header'>
                    <!-- ...  -->
                    <Link className='navbar-brand' to={ '/' }>WebApplication10 <span>{this.props.count}</span></Link>
                </div>
                <!-- ...  -->
            </div>
        </div>;
    }
}

，然后导出新包装的NavMenu：

export const NavMenu = connect(
    (state: ApplicationState) => state.counter, 
    CounterStore.actionCreators                 
)(NavMenuComponent);

export default NavMenu;

仅需注意，您无需添加诸如typeof actionCreators或RouteComponentProps之类的类型：
```
type CounterProps =
    CounterStore.CounterState
    & typeof CounterStore.actionCreators
    & RouteComponentProps<{}>;
```
由于NavMenu仅读取CounterState.count，因此不需要其他操作或路由。只需使用以下代码来定义CounterProps
```
 type CounterProps =
    CounterStore.CounterState;
```
如果您以后希望添加自定义操作，只需添加所需的操作即可：
```
type CounterProps =
    CounterStore.CounterState
    & your action type;
```

如何在React + ASP.NET Core + TypeScript中访问组件外部的Redux存储？

1 个答案: