reactjs - Egenskapen 'dispatch' mangler i typefeil når roten butikk sendes til rotkomponent


Jeg begynner med TypeScript og Redux, og jeg støtte på følgende feil når jeg startet opp applikasjonen min.

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

Jeg har følgende rotkomponent som rendres:

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
);

Feilen oppstår i linjenstore={RootStore}. Her er RootStore resultatet av å kalle createStore på min root-reducer og initialtilstand. Typen til initialtilstanden er IRootState som er ganske enkel:

export interface IRootState {
    navBar: INavBarState;
}

og Root-butikken eksporteres som følger:

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

Hvis jeg forstår dette riktig (noe jeg er sikker på at jeg ikke gjør), skjer feilen fordi parameteren dispatch ikke er til stede i returverdien fra createStore. Men siden dette er en biblioteksfunksjon, har jeg en tendens til å tro at jeg overser noe ganske åpenbart her.

Svar #1

Problemet er at for Root erklærer du props som et objekt av typen Store<IRootState>, i stedet for et objekt med en store-egenskap av typen Store<IRootState>. Derfor oppstår feilen '{ store: Store<IRootState>; }' kan ikke tildeles typen 'Store<IRootState>'

Å pakke inn typeparameteren og store-parameteren bør gjøre susen:

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

Relaterte artikler