Improve Action creator

[yordis]

Pretty much how https://github.com/infinitered/reduxsauce does it.

Instead of creating a lot of functions that just return the object that represent the action that you are talking about,

You could use a function that does that for you and specially, it gives you back the action list.

take a look to reduxsaurce, I think it is worth to add something similiar or the same.

Side note,

that way you could even scope your actions based on some configuration when you create the actions, like prefix, which it is really handy when you have large applications (you do not need to hunt the entire code looking for every place that you need to rename (add the prefix) your action.

[anish000kumar]

@yordis I like the idea! however, I don't think the syntax is clear enough at first sight. For example, in the snippet below one can see and know custom is a function with two arguments which will return some stuff. For the concise version as well I would like to maintain similar clarity. Any ideas about syntax to help with clarity while being concise

const actions= createActions({
  loginRequest: ['username', 'password'],
  loginSuccess: ['username'],
  loginFailure: ['error'],
  requestWithDefaultValues: { username: 'guest', password: null },
  logout: null,
  custom: (a, b) => ({ type: 'CUSTOM', total: a + b })
}, {}) // options - the 2nd parameter is optional

Also, about prefixing, I guess prefixing would be better suited in module object. So you can probably do :

export const module = {
  name : "user",
  namespace : "USER",
  state,
  actions,
  mutations,
  sagas
}

[yordis]

@anish000kumar well,

First action creator just give you back the actions objects, so

custom is a function with two arguments which will return some stuff

It returns an action object, pretty well defined what it should do to be honest.

For the concise version as well I would like to maintain similar clarity.

What do you mean by that? Right now is really concise, the action creator give you back the functions that create action objects.

The name of the key is the name of the action type unless you have a custom creator.

[yordis]

Also, about prefixing, I guess prefixing would be better suited in module object. So you can probably do

Seems good

[dragonfire1119]

My 2 cents would be to keep the design the same because it's really nice & straight to the point when you look at it for the first time! Reduxsauce is nice but you have to think about how everything works.

[anish000kumar]

@yordis @dragonfire1119 I guess it might help to offer an optional syntax that strikes good balance between clarity and conciseness, something like this maybe:

const actions = createActions({
 setName : with('name'), 
// {type: 'SET_NAME', name}

 setProfile : with('name, email'), 
// {type:'SET_PROFILE', name, email}

 setEmail : (email) => ({ type:'SET_EMAIL', email }) 
// you can always use the full version without helper
})

Would love to hear some feedback on this and also some alternative syntax, if you have something better in mind.

[yordis]

@anish000kumar I love that idea ❤️

@dragonfire1119 I am not following what you mean by that, the only reason that I suggest it is because this way you have a tide relationship between the actions and the mutations/sagas (which there is for sure)

But this is not something that you have to use by any means.

[dragonfire1119]

@yordis What I'm meaning is I'm not much into the magic side of things but I'm not against saving time either just there needs to be a balance in my perspective. with() is really nice & to the point! Reduxsauce you have to much magic going on with actions being auto named for you with a array on the end that doesn't have any point to it with naming in mind. When I first looked at reduxsauce I'm like what does it hurt typing out {type: 'SET_EMAIL', email} instead of setEmail: ['email']? I understand where your coming from on the actions tide to the mutations! I was just hoping that you where not suggesting copying how reduxsauce creates the actions. I do know if you put to much magic over code then you get a slower result in the end.

@anish000kumar The with() idea looks better!

PS: I've been testing reduxsauce against redux-box right now on a decent sized project & redux-box calls the same actions faster on the React Native Debugger! I haven't looked into it that much though just testing & seeing if redux-box is stable enough for my production products.

[yordis]

@yordis What I'm meaning is I'm not much into the magic side of things.

Why are you even using redux-box if you are saying such of thing?

Just use Redux boilerplate so you do not have any “magic” (whatever that means to you)

Also I think that you are missing the point of the action creator on resuxsauce (or I miss understand what are you talking about). One is a function and the other one is a plain object.

[anish000kumar]

Version 1.4.0 onwards, redux-box includes a small helper to easily create actions, like so:

import {createActions, using} from 'redux-box'

const actions = createActions({
  setName: using("name"),
  setProfile: using("name, email, password"),
  setStatus:(status) => ({ type:'SET_STATUS', status }) //you can always use full function instead of 'using' helper

})

The actions object produced by createActions is:

const actions = {
  setName: (name) => ({ type:'SET_NAME', name }),
  setProfile: (name, email, password) => ({type:'SET_PROFILE', name, email, password}),
  setStatus:(status) => ({ type:'SET_STATUS', status })
}

[yordis]

Would be good if you create some example in how to use it.

Specially on the mutations functions key .