Idiomatic Redux: Why use action creators?

[markerikson]

Original author: Samuel Sharpe
Original date: 2016-10-10T09:31:48Z

Great intro, really looking forward to the next article :)

Your final thoughts regarding consistency and abstraction are incredibly important I feel, but there does not appear to be much material on the topic, or am I wrong?

Tal Kol wrote an excellent article on Medium "Avoiding Accidental Complexity When Structuring Your App State" and in the comments, he spoke about using thunks for all actionCreators. I am just wondering if you do something similar or do you prefer Sagas or something else or is this something you're going to talk about in your series?

[markerikson]

Original author: Guillaume Claret @guillaume_claret
Original date: 2016-10-10T11:35:30Z

I think that dispatching action creator vs dispatching plain objects is only a matter of syntax. With action creators you identify parameters by position, with plain objects you identify them by name. This is I think the only difference between:

dispatch(foo(1, 2, 3));

and:

dispatch({
  type: 'foo',
  a: 1,
  b: 2,
  c: 3
});

I prefer the second version, because:
* explicit naming of the parameters helps to understand the code;
* you do not have to write an action creator, thus less code to think about.

[markerikson]

Original date: 2016-10-10T15:36:40Z

> Your final thoughts regarding consistency and abstraction are incredibly
important I feel, but there does not appear to be much material on the
topic, or am I wrong?

Not quite sure what you're asking here. Are you referring to lack of specific articles regarding "consistent Redux usage", or something else?

> I am just wondering if you do something similar or do you prefer Sagas
or something else or is this something you're going to talk about in
your series?

Looking... ah, I see his comment. No, in my own app, I do have some of "plain" action creators for simpler actions (such as, say, "CLOSE_MODAL" or "DESELECT_ITEM", but also a large number of thunks for more complex preparation and sequencing of lower-level steps into a larger feature-specific behavior. I do also have a few sagas, primarily for complex async behavior (such as a long-polling loop, and a couple bits of decoupled sequencing triggered by actions).

Discussing thunks vs sagas isn't specifically on my list of topics at the moment. If you're interested, I did post my rough post plans on Reddit yesterday, at https://www.reddit.com/r/re... .

[markerikson]

Original date: 2016-10-10T17:09:42Z

Hmm. I have to say I hadn't considered the "named arguments" aspect before. That said, I stand by my main points - using action creators keeps the rest of the code from needing to know the specific details of what goes into that action, as well as whether the behavior is actually a thunk or something complex.

Also, using an action creator doesn't preclude the "named arguments" concept. An action creator could definitely accept an object as a parameter instead of just positional parameters.

[markerikson]

Original author: Samuel Sharpe
Original date: 2016-10-10T21:47:56Z

> Not quite sure what you're asking here. Are you referring to lack of specific articles regarding "consistent Redux usage", or something else?

Yes, I was referring to the lack of articles regarding "consistent Redux usage". It is great to have many options and I like to experiment with the different libraries, but when working with a team I find consistency and having the "right" abstraction is important. So, it wasn't really a question unless you know of articles on the topic.

Thanks for the reddit link, looking forward to reading them 😄

[markerikson]

Original author: David Gilbertson @davidgilbertson
Original date: 2016-12-15T05:33:35Z

"I highly encourage the use of the object literal shorthand for binding actions with connect". That's so nice and clean, thanks.

[markerikson]

Original date: 2016-10-10T15:36:40Z

> Your final thoughts regarding consistency and abstraction are incredibly
important I feel, but there does not appear to be much material on the
topic, or am I wrong?

Not quite sure what you're asking here. Are you referring to lack of specific articles regarding "consistent Redux usage", or something else?

> I am just wondering if you do something similar or do you prefer Sagas
or something else or is this something you're going to talk about in
your series?

Looking... ah, I see his comment. No, in my own app, I do have some of "plain" action creators for simpler actions (such as, say, "CLOSE_MODAL" or "DESELECT_ITEM", but also a large number of thunks for more complex preparation and sequencing of lower-level steps into a larger feature-specific behavior. I do also have a few sagas, primarily for complex async behavior (such as a long-polling loop, and a couple bits of decoupled sequencing triggered by actions).

Discussing thunks vs sagas isn't specifically on my list of topics at the moment. If you're interested, I did post my rough post plans on Reddit yesterday, at https://www.reddit.com/r/re... .

[markerikson]

Original date: 2016-10-10T17:09:42Z

Hmm. I have to say I hadn't considered the "named arguments" aspect before. That said, I stand by my main points - using action creators keeps the rest of the code from needing to know the specific details of what goes into that action, as well as whether the behavior is actually a thunk or something complex.

Also, using an action creator doesn't preclude the "named arguments" concept. An action creator could definitely accept an object as a parameter instead of just positional parameters.

[markerikson]

Original author: davedisq @davemydisqus
Original date: 2017-10-11T08:43:29Z

@GuillaumeClared, but dispatch with 'type', need a global dispatch function ? have you some of code to understand better?

[markerikson]

Original author: Donn
Original date: 2018-03-13T01:04:16Z

Nice! I think I'll plan some time to refactor some code with these clean recommendations.
The real magic is "Passing an object full of actions will automatically run each action through the bindActionCreators utility, and turn them into props". So, I don't have to issue dispatch() with my action creators, if I go this way. Sweet.
What I couldn't find is where this automatic bindActionCreators convenience is documented. I looked at the usual mapStateToProps and <provider> docs, but failed to find any mention of it. Sigh.

[markerikson]

Original date: 2018-03-13T01:25:31Z

It's currently implemented in wrapActionCreators.js

Ultimately, what `connect` does is basically this:

// assume we have:
import {bindActionCreators} from "redux";
import * as actions from "./actions";

const mapDispatch = (dispatch) => {
    return bindActionCreators(actions, dispatch);
}

Ohhhh, re-reading your comment, you're asking about the docs.

Yeah, it's in there, just not particularly called out or highlighted:

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

We're hoping to revamp the React-Redux docs in the near future, to make them easier to read and understand.

[markerikson]

Original author: Donn
Original date: 2018-03-14T04:58:30Z

Oh excellent! Thank you

[markerikson]

Original author: Vanderson Silva @vanderson_silva
Original date: 2019-01-06T19:15:25Z

Such an amazing article. Thank you very much!

[markerikson]

Original author: OlzD @olzd
Original date: 2019-02-27T11:50:01Z

If you using Typescript this becomes completely pointless and actually negative since you have to write 3x the code to simply define the function. You also lose definitions when they change and debugging functionally.

[markerikson]

Original author: Ali Qanavatian @aliqanavatian
Original date: 2020-04-01T12:58:19Z

Redux FAQ links are broken.

possible fixes:
https://redux.js.org/faq/ac...
https://redux.js.org/faq/co...

[fjplaurr]

Great article Mark.

What do you think about useSelectos&useDispatch hooks instead of using the stateToProps&dispatchToProps? In terms of decoupling Redux from React.

[markerikson]

Yes, we now specifically recommend the React-Redux hooks API as the default, and teach it as the standard approach:

• https://redux.js.org/tutorials/fundamentals/part-5-ui-react#using-redux-with-react
• https://redux.js.org/tutorials/essentials/part-2-app-structure#the-react-counter-component
• https://redux.js.org/style-guide/style-guide#use-the-react-redux-hooks-api