When to use dispatch in an action creator?

Question

I have defined two functions in my ActionCreator.js file First:

export const getAudioForVerification = ()=>{
return fetch(baseUrl+'audio',{
    // Get Request
}
.then(response=>response.json());}

Second:

export const audioVerificationResult = (audioId,verificationResult) =>(dispatch)=>{
return fetch(baseUrl+'audio',{
    // PUT Request
})
.then(response=>response.json());
}

MainFunction:

const mapDispatchToProps = dispatch => ({
getAudioForVerification: ()=>dispatch(getAudioForVerification),
audioVerificationResult: (audioId,verificationResult)=>dispatch(audioVerificationResult(audioId,verificationResult))
});

Q1: If I remove dispatch from my Second function: audioVerificationResult I get an error

Actions must be plain objects. Use custom middleware for async actions.

Why doesn't such an error appear for the first function as well?

Q2: The first function returns a promise (I can use .then in my MainComponent after I call this function) while the second one doesnot. Why?

I have started learning about Promises, Redux and Thunk (Web dev in general) quite recently. If the questions are too broad please direct me to a learning source.

Thank you for your time.

score 0 · Accepted Answer · answered Jul 11 '20 at 08:36

0

The functions in your ActionCreator.js are not exactly action creators since they are not returning plain object like the redux docs suggests. They are just js functions.

You don't need to dispatch if you are using .then() in your component and reading the results/data. dispatch only helps you with the redux store updates.

Hope this answer helps you to understand granular details about middleware better.

answered Jul 11 '20 at 08:36

Prathap Reddy

1,688
2
6
18

Then I should remove these function from mapDispatchToProps and rather than defining them in my ActionCreator, I should define them in my MainComponent. Is this the best way to go about it or is there a better approach? I wanted all my fetch in a single file therefore decided to define these in my ActionCreator.js file even though they were not accessing the store. – Aman Krishna Jul 11 '20 at 08:58
Ideally no point of keeping them in`mapDispatchToProps` and accessing it via `props`. You can remove `mapDispatchToProps` argument of `connect` altogether. It is still better to keep them in `ActionCreator.js` (separate file) for SoC and maintainability. May be you can change the file name. – Prathap Reddy Jul 11 '20 at 09:00

When to use dispatch in an action creator?

1 Answers1