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

Question

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}>

    <Router>

      <Route exact={true} path="/" component={App} />

    </Router>

  </Provider>

);



ReactDOM.render(

  <Root store={RootStore}/>,

//......~~~~~~~~~~~~~~~~~

  document.getElementById('root') as HTMLElement

);

The error is occurring in the line

store={RootStore}

. Here

RootStore

is the result of calling

createStore

on my root reducer and initial state. Initial state's type is

IRootState

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

dispatch

isn't present on the return value of

createStore

. But since this is a library function, I'm inclined to believe that I'm missing something pretty obvious over here.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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}) => (

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

Sign up