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

user_2054527 0
Viewed 2364

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 linestore={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.

react-router-v4 react-router redux typescript reactjs
1 Answers

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