Explanation this JavaScript React Redux Code

Question

There are 4 files:

1. React Component File:

   

2. Action-Creator File:

   

3. Action file:

   

4. Reducer File:

   

Now I have used this code for about 100s of times already but I am still not able to understand certain things. Like for instance, how does point 1 dispatch effect point 2 function? What does const variablename = (data) => asycn(dispatch) => {} means?

Any explanation would be helpful. Thanks.

Answer 1

const variablename = (data) => asycn(dispatch) => {}

This is a small version of Redux Thunk. In FP terms, thunk is a higher-order function that returns another function. Your function can be written like this,

function variableName(data){
 return async function(dispatch){
   
 }
}

When you read Redux docs, you will come to know this is one of the middlewares used to write async calls in a synchronized way. For instance, like you wrote:

dispatch(saveShippingAddress(formData)) 

then in saveShippingAddress

dispatch({type:actions.SHIPPING_ADDRESS_SAVE, payload: formData})

This is your synchronized call.

For a moment, just assume you would be making a backend API call inside saveShippingAddress. Even in that case, you would be writing the same

dispatch(saveShippingAddress(formData))

from your component.

But in your action file, you would have written something like:

try{
 axios.get(MY_API).then((resp)=>{
   dispatch({type:actions.SHIPPING_ADDRESS_SAVE, payload: resp.data})
 })
}catch(e){

}

So you see, you have got consistency in your component while calling any action. For in-depth understanding, please go thru this. https://stackoverflow.com/a/34599594/2983489