Bhargav Bhargav - 3 years ago 302
TypeScript Question

Property 'dispatch' is missing in type error when passing root store to root component

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>; }'.

I have the following root component being rendered:

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

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

The error is occurring in the line
. Here
is the result of calling
on my root reducer and initial state. Initial state's type is
which is pretty basic:

export interface IRootState {
navBar: INavBarState;

and the Root store is exported as follows:

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

If I understand this correctly (which I'm sure I don't), the error is happening because the parameter
isn't present on the return value of
. But since this is a library function, I'm inclined to believe that I'm missing something pretty obvious over here.

Answer Source

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}) => (
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download