问题
I just started exploring react-redux hooks and I was curious how to return a promise if I am using thunk and useDispatch()
. Essentially I want to achieve the following:
const dispatch = useDispatch();
dispatch(myAction(...args)).then((result) => {
...do something with result
});
When my action looks like this:
const myAction = (arg1, arg2) => {
return (dispatch, getState) => {
Promise.resolve(arg1 + arg2);
}
}
I've simplified my problem a lot, but that is essentially what I'm dealing with. When I try to dispatch the above action, I get the error dispatch(...).then
is not a function.
I know redux hooks are pretty new, but I was curious if anybody had gotten this to work or would know a solution. I feel like it should be relatively easy to make this work, but I am at a loss. If you need any more information, let me know. Thanks in advance for any help!
回答1:
As dispatch
returns either of two:
For sync action (like
dispatch ({type: 'ACTION'})
it will return action object ({type: 'ACTION'}
in my example)For thunk actions (action creators which return functions) it returns the same result returned from action creator.
So for your case just add return
statement for your action creator
const myAction = (arg1, arg2) => {
return (dispatch, getState) => {
return Promise.resolve(arg1 + arg2);
}
}
You can make myAction
more realistic like so
const myAction = (arg1, arg2) => {
return (dispatch, getState) => {
return fetch(/* some request */).then(response => dispatch ({type: 'RESPONSE_RECEIVED', payload: response}));
}
}
In this case also resolved promise will be returned. Contnents of promise will be object {type: 'RESPONSE_RECEIVED', payload: response}
.
Or you can set arbitrary contents for returned promise like so
const myAction = (arg1, arg2) => {
return (dispatch, getState) => {
return fetch(/* some request */).then(response => {
dispatch ({type: 'RESPONSE_RECEIVED', payload: response})
return response;
}
}
}
In this example resolved promise will be returned but which contains response
inside.
In all cases you can chain like you want
dispatch(myAction(...args)).then((result) => {
...do something with result
});
来源:https://stackoverflow.com/questions/56694102/how-to-return-a-promise-from-an-action-using-thunk-and-usedispatch-react-redux