[feat] Namespacing actions

[jschill]

Hello,

When using actions I see two problems.

1. If there are alot of actions, they kind of pollute the prop root and cause prop hell.
2. There's no good way of using two different action objects.

import { actions as itemActions } from 'store/item/actions';
import { actions as authActions } from 'store/auth/actions';

Sure, we could combine those two and merge into one object by borrowing the excellent combineActions from redux-zero https://github.com/redux-zero/redux-zero/blob/3d0b032c0f3c94757e307673d46e9c52327f3b75/src/utils/combineActions.ts

...
const actions = combineActions(itemActions, authActions);
const Connected = connect('item,auth', actions)(PleaseConnectMe);
...

But problem this time is if both itemActions and authActions have a reset action they will collide.

So to solve these two, would it be an idea to implement some kind of prop namespacing? Without discussing the implementation, wouldn't it be an idea to have the itemActions in the example accessible via this.props.itemActions.actionName instead of this.props.actionName.

Would there be any cons with above aproach?

[jschill]

I've been playing around with the idea of passing an object to connect where the property is a "namespace" and the value are the actions.

So to pick up the previous example:

...
const actions = {
   'itemActionsFoo': itemActions,
   'authActionsBar': authActions
};
const Connected = connect('item, auth', actions)(PleaseConnectMe);
...

And then in PleaseConnectMe i can do:

this.props.itemActionsFoo.reset();

Any thoughts?

I've made a POC here where I expose a "namespaceConnect" function: https://github.com/jschill/unistore Commit: https://github.com/jschill/unistore/commit/d1ddc450377a9ecfca9942263cb4459bcf6e5930

[developit]

The trick here is that it becomes difficult to memoize mapActionsToProps when it contains nested objects. Maybe something like the select() function that powers mapStateToProps could work here?