I am getting started with typescript and redux and I came across the following error when bootstrapping my application.
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
The problem is that for Root
, you declare the props as an object of type Store<IRootState>
, rather than an object with a store
property of type Store<IRootState>
. Hence the error '{ store: Store<IRootState>; }' is not assignable to type 'Store<IRootState>'
Wrapping the type parameter and the store
parameter should do the trick:
const Root: React.SFC<{store: Store<IRootState>}> = ({store}) => (