Wie der Versand einer Aktion oder eines ThunkAction (in Maschinenschrift, mit redux-thunk)?

Sagen, dass ich code wie folgt:

import { Action, Dispatch } from 'redux';
import { ThunkAction } from 'redux-thunk';

interface StateTree {
  field: string;
}

function myFunc(action: Action | ThunkAction<void, StateTree, void>,
                dispatch: Dispatch<StateTree>) {
  dispatch(action); //<-- This is where the error comes from
}

...Ich bekomme diese Fehlermeldung von der TypeScript-compiler:

ERROR in myFile.ts:x:y
TS2345: Argument of type 'Action | ThunkAction<void, StateTree, void>' is not assignable to parameter of type 'Action'.
  Type 'ThunkAction<void, StateTree, void>' is not assignable to type 'Action'.
  Property 'type' is missing in type 'ThunkAction<void, StateTree, void>'.

Ich glaube das problem ist, weil der Weg der redux-thunk type definition-Datei ergänzt die redux Dispatch - Schnittstelle und der Unfähigkeit Typoskript zu wissen, welche definition von Dispatch zu verwenden.

Gibt es eine Möglichkeit, um dieses?

InformationsquelleAutor pleasedesktop | 2017-03-25
  1. 2

    Ich denke, Sie sind richtig, dass trotz des seins in der Lage zu handhaben, beide Typen, Maschinenschrift, kann nicht herausfinden, die überlastung zu verwenden.

    Ich denke, die beste option für Sie ist die Besetzung wieder auf die gewünschte Art beim Aufruf dispatch

    function myFunc(action: Action | ThunkAction<void, StateTree, void>, 
                dispatch: Dispatch<StateTree>) {
  if (action instanceof ThunkAction<void, StateTree, void>) {
    dispatch(action as ThunkAction<void, StateTree, void>);
  } else {
    dispatch(action as Action);
  }
}

    Ich hoffe, ich Irre mich und es gibt einen besseren Weg, dies zu erreichen.

    InformationsquelleAutor Michael Peyper
  2. 16

    ThunkAction Signatur geändert mit der neuesten version (jetzt ist ThunkAction<void, Your.Store.Definition, void, AnyAction>) und wenn nicht eine böse Doppel-casting (action as {} as Action), die elegantere Möglichkeit, die ich gefunden ist, um zu definieren, die redux Versand als ThunkDispatch wie diese:

    import { applyMiddleware, Store, createStore, AnyAction } from 'redux';
import logger from 'redux-logger';
import thunk, { ThunkDispatch } from 'redux-thunk';

import { Redux } from '../definitions';
import rootReducer from './reducers';
import { bootstrap } from './actions';

export default function configureStore() {

    const middleware = applyMiddleware( thunk, logger );

    const store: Store<Redux.Store.Definition> = createStore(rootReducer, middleware);

    //Here the dispatch casting:
    (store.dispatch as ThunkDispatch<Redux.Store.Definition, void, AnyAction>)( bootstrap() );

    return store;

}

    Den Fall, dass jemand anderes suchen, für eine aktualisierte Antwort! ^^

    • Dies sollte die akzeptierte Antwort!
    InformationsquelleAutor pierpytom
  3. 3

    Diese die richtigen Testungen: https://github.com/reduxjs/redux-thunk/blob/master/test/typescript.ts

    Insbesondere: 

    const store = createStore(fakeReducer, applyMiddleware(thunk as ThunkMiddleware<State, Actions>));

    applyMiddleware bereits überschreiben Sie den Versand mit einem ThunkDispatch.

    InformationsquelleAutor joaoguerravieira
Schreibe einen Kommentar