Question

我开始使用typescript和redux，并且在引导我的应用程序时遇到了以下错误。

Type '{ store: Store<IRootState>; }' is not assignable to type 
'IntrinsicAttributes & Store<IRootState> & { children?: ReactNode; }'. 
 Type '{ store: Store<IRootState>; }' is not assignable to type 'Store<IRootState>'.
 Property 'dispatch' is missing in type '{ store: Store<IRootState>; }'.

我有以下根组件呈现：

const Root: React.SFC<Store<IRootState>> = (store) => (
  <Provider store={store}>
    <Router>
      <Route exact={true} path="/" component={App} />
    </Router>
  </Provider>
);

ReactDOM.render(
  <Root store={RootStore}/>,
//......~~~~~~~~~~~~~~~~~
  document.getElementById('root') as HTMLElement
);

错误发生在行store={RootStore}中。这里RootStore是在我的根减速器和初始状态上调用createStore的结果。初始状态的类型为IRootState，这是非常基本的：

export interface IRootState {
    navBar: INavBarState;
}

并导出根存储如下：

const RootStore = createStore(rootReducer, initialState);
export default RootStore;

如果我理解正确（我确定不这样做），则会发生错误，因为参数dispatch不存在于createStore的返回值上。但由于这是一个库函数，我倾向于相信我在这里遗漏了一些非常明显的东西。

Answer 1

问题是，对于Root，您将props声明为Store<IRootState>类型的对象，而不是具有store类型Store<IRootState>属性的对象。因此错误'{ store: Store<IRootState>; }' is not assignable to type 'Store<IRootState>'

包装类型参数和store参数应该可以解决问题：

const Root: React.SFC<{store: Store<IRootState>}> = ({store}) => (

将根存储传递给根组件时，属性'dispatch'在类型错误中丢失

1 个答案: