Redux: Simplifying the Arrow Functions
We will learn how to reduce the syntactic noise in the action creators and components when using arrow functions.
[00:00] Since action creators are just regular JavaScript functions, you can define them any way you like. For example, if you don't like the error notation, it is fine to replace with traditional function declarations that existed since the beginning of JavaScript.
[00:16] However, if you enjoy declaring your action creators as arrow functions, you can make them even more concise. In this action creator, right after the arrow, we put the curler brace to indicate the beginning of a blog. It starts with a curly brace, it ends with a curly brace. The block contains a number of statements inside.
[00:37] However, in this particular case, the only statement it contains is the return statement. In this case, it is permissible to just use the value that just returned as the body of the error function.
[00:51] I'm removing the return statement, and rather than use a block as the body of my arrow function, I use the object expression. It's important to wrap it in parents, so that parser understands this as an expression rather than a block.
[01:08] I'm repeating the same steps for any other function that just returns an object. In this case, I'm removing the explicit return statement and I'm changing the body to be an object expression. I'd do the same with [inaudible] . I remove the return, I remove the block. Instead, I wrap it in parents, so it's interpreted as an object expression.
[01:30] You can use this part outside action creators too. For example, often mapstatetoprops and mapdispatchtoprops just return objects, so it can be handy to apply it here as well, and remove the explicit return statement in favor of an object expression that becomes the arrow function body.
[01:49] To make mapdispatchtoprops even more compact, I'm replacing the arrow function with a concise method notation that is also a part of ES6, and is available when a function is defined inside an object.
[02:04] Let's recap. If the arrow function only contains a single return statement, you can replace the body of the arrow function with just a value. If this value is an object, don't forget to wrap it in parents so that the parser understands that this is an expression and not a block.
[02:24] Also, it can be nicer to use the concise method notation inside mapdispatchtoprops, instead of arrow functions because it's harder.
There is one—I believe it’s enabled in https://github.com/gaearon/todos. It’s part of the Airbnb preset.
Looks like the lint rule enforces the "implicit return" covered in the first part of the video, but not the ES6 method notation covered in the second.
Would be great to have ESLint rule to enforce this :)