gajus / gajus/redux-immutable-examples

A way to reduce actions boilerplate

Open
#2 0 comments 0 reactions 0 assignees View on GitHub
question
Dominant language
JavaScript
Stars
102
Forks
19
PR merge metrics
No merged PRs in 30d

Description

Here's the current actions boilerplate:

``` js
taskAdd = (name) => ({
name: 'TASK_ADD',
data: {
name
}
});

taskDone = (id) => ({
name: 'TASK_DONE',
data: {
id
}
});
```

It suffers from these problems:

1) Repetitive typing where you repeat `name` and `data` for each action and then also repeat the list of parameters, **twice** for each action.
2) Action names are not defined as reusable/importable constants (therefore you can't enforce compile-time checks on them).
3) (Minor) For some reason you're not using `const` but instead `let` the variables at top of the file. I guess it's some legacy/habit issue?

Have you given any thought on these problems before? I like the CRC/CCA approach in general but applying it directly means sacrificing the above. For example, with `redux-actions` I can:

``` js
// Identity action creator, no boilerplate at all, clean and DRY.
export const chatMessageSent = createAction('CHAT_MESSAGE_SENT');
```

and then (in a redux saga):

``` js
import {chatMessageSent} from '.../actions'

yield takeEvery(chatMessageSent.toString(), function* ({payload: {contact, text}}) {
// ...
});
```

and I get no headache about possible typos in the action names.

Of course I can come up with a poor man ad-hoc shortcut, something like:

``` js
function createAction(name) {
const action = (data, metadata) => ({name, data, metadata});
action.name = name;
return action;
}
...
chatMessageSent = createAction('CHAT_MESSAGE_SENT');
...
yield takeEvery(chatMessageSent.name, function* ({data: {contact, text}}) {
// ...
});
```

but a proper well-thought library when you still can override the action creator logic, specify list of fields etc. would be better.

And then again, in `redux-immutable` you need to use these ALL_CAPS constants (which you can't import!) as the key names in reducers, while in `redux-actions` they provide a handy shortcut with compile-time check (something your `combineReducers` could also benefit from):

``` js
const reducer = handleActions({
[selectContact]: (state, {payload: {id}}) => ({
...state,
selectedId: id
}),
```

I know this is not a proper ticket and more of a rant, but anyway. 🙃

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue does not name any files or tests. Start by reviewing the example's existing action creators and reducers, including the redux-saga and combineReducers usage described here. The requested design and completion criteria are not defined, so a maintainer decision is needed before implementation can begin.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, redux
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.