Verwenden von Thunks in mapDispatchToProps

Question

Ich frage mich, wie man asynchrone Action-Ersteller in mapDispatchToProps für react-reduxconnect verwenden. Ich verwende die redux-thunk Middleware und die folgende ist mein mapDispatchToProps:

function mapDispatchToProps(dispatch) { 
    return { 
     foo: function() { 
      dispatch(someAction()); 

      return function asyncAction(dispatch, getState) { 
       console.log("An async action!"); 
       dispatch(someOtherAction(getState().foo)); 
      }; 
     } 
    } 
} 

Allerdings, wenn ich die oben tun, wird die Asynchron-Aktion nicht ausgeführt werden sollen. Was ist der richtige Weg, dies zu tun?

Answer 1

Ich schlage vor, Ihren tatsächlichen Thunk (someOtherAction) anders zu deklarieren. Im folgenden Beispiel ist asyncAction ein Async-Aktionsersteller, der einen Thunk zurückgibt. Der Thunk kann dann andere Aktionen versenden (nachdem beispielsweise ein Versprechen aufgelöst wurde).

function asyncActionCreator() { 
    return (dispatch, getState) => { 
    dispatch(someAction()); 

    someAsyncStuff().then(() => { 
     dispatch(someOtherAction(getState().foo); 
    }); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    foo:() => dispatch(asyncActionCreator()) 
    } 
}