Redux actions for simple booleans

[J. Ryan Stinnett]

I'm looking for some guidance on naming and style for Redux actions
for simple booleans.

Let's say you have some toggle button in the UI with enabled and
disabled states. What is a good way to name the actions to manipulate
this? Here are some possible options:

# Option 1

A single action named UPDATE_BOOLEAN_THING, and you pass in the new
state to the action creator like `updateBooleanThing(true)` to enable
it.

# Option 2

Separate actions for each state transition, so ENABLE_BOOLEAN_THING
and DISABLE_BOOLEAN_THING.

# Option 3

A single TOGGLE_BOOLEAN_THING action so the component is not
describing the state to move towards explicitly, but leaves it to the
reducer to handle instead.

- Ryan

[Brian Grinstead]

I think either 1 or 2 is best, so that the action is a fact that doesn’t rely on previous states to interpret. And prefer option 1 since it results in less boilerplate code and it’s a simple payload to include.

Brian

> _______________________________________________
> dev-developer-tools mailing list
> dev-devel...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-developer-tools

[James Long]

I agree 100%. I like option #1. It's clear in the action log what happened.
If the flag gets in a bad state, toggling it will forever be the opposite
of what's it's supposed to be, whereas forcing it on/off will fix the "bad
state".



On Mon, May 2, 2016 at 6:13 PM, Brian Grinstead <bgrin...@mozilla.com>
wrote:

[Nick Fitzgerald]

With #1, you can also define helpers to make it similar to #2 from the
caller's side without doubling the number of reducers:

const enableThing = () => ({
type: UPDATE_BOOLEAN_THING,
value: true,
});

const disnableThing = () => ({
type: UPDATE_BOOLEAN_THING,
value: false,
});

[J. Ryan Stinnett]

Thanks, these arguments helped clarify it for me!

- Ryan