Why enclose actions returned by Redux action creators in curly braces?
1> https://medium.com/@leannezhang/curly-braces-versus-parenthesis-in-reactjs-4d3ffd33128f
Curly braces { } are special syntax in JSX. It is used to evaluate a JavaScript expression during compilation. A JavaScript expression can be a variable, function, an object, or any code that resolves into a value.
How parenthesis ( {} ) are used?
Parenthesis are used in an arrow function to return an object.
() => ({ name: 'Amanda' }) // Shorthand to return an object
// The above is equivalent to
() => {
return { name : 'Amanda' }
}
2> https://stackoverflow.com/a/41461040/1902852
Functional React Component with an argument in curly braces
const List = ({ items }) => (
<ul className="list">
{items.map(item => (
<ListItem item={item} />
))}
</ul>
);
This is called a “destructuring”. Actually, you’re passing an object as an argument to the function, but the destructuring uses only the named properties of the object.
const destructuring = ({ used }) => console.log(used);
const properties = {
unused: 1,
used: 2
};
destructuring(properties); // 2
Because of ES-6 official syntax guide – This is true for all arrow functions, not just redux. See below official guide.
// Parenthesize the body of function to return an object literal expression: params => ({foo: bar})
The action creators are functions. Function bodies are enclosed in curly braces. Arrow functions allow you to return immediately instead of using the return keyword by omitting the curly braces that normally surround a function body. However, objects are also surrounded by curly braces.
So, in those action creator functions, per ES-6 guide of arrow functions – if you want to return an object you have to use ({..}). If you don’t use parentheses and use only the curly ones function sees that like function blocks and can’t return an object as intended here.
If you leave out the parenthesis, the arrow function believes it is opening and closing the function, as opposed to returning an object.
// It believes:
const myActionCreator = value => {
type: "MY_ACTION", value;
};
// Means:
const myActionCreator = function(value) {
type: "MY_ACTION", value;
};
// Instead of:
const myActionCreator = function(value) {
return {
type: "MY_ACTION",
value
};
};
// SO THE CORRECT SYNTAX IS -
const myActionCreator = value => ({
type: "MY_ACTION", value;
});
To solve this issue, you put parenthesis around the curly braces. Now the arrow function knows it is returning what is inside the parenthesis, as opposed to opening the function body. And inside the parenthesis — your object.
Reducers - Absolute Basic
Dr. Md. Harun Ar Rashid, MPH, MD, PhD, is a highly respected medical specialist celebrated for his exceptional clinical expertise and unwavering commitment to patient care. With advanced qualifications including MPH, MD, and PhD, he integrates cutting-edge research with a compassionate approach to medicine, ensuring that every patient receives personalized and effective treatment. His extensive training and hands-on experience enable him to diagnose complex conditions accurately and develop innovative treatment strategies tailored to individual needs. In addition to his clinical practice, Dr. Harun Ar Rashid is dedicated to medical education and research, writing and inventory creative thinking, innovative idea, critical care managementing make in his community to outreach, often participating in initiatives that promote health awareness and advance medical knowledge. His career is a testament to the high standards represented by his credentials, and he continues to contribute significantly to his field, driving improvements in both patient outcomes and healthcare practices.
