There are 4 files:
React Component File:
Action-Creator File:
Action file:
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.
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
