Some way to add custom Actions

[anozaki]

Currently I'm doing the following to add custom action to my component.

let UiComponent = ui({
    key: 'procedure-groups',
    state: {
        group: null,
        editMode: [],
        lastAction: null
    }
})(ProcedureGroupComponent);
const mapStateToProps = (state) => {
    return {};
};
const mapDispatchToProps = {
    load: getProcedureGroup,
    save: saveProcedureGroup
};
export default connect(mapStateToProps, mapDispatchToProps)(UiComponent);

This feels wrong as I'm double wrapping the Component. Is there a better way to do this?

or another implementation would be...

export default ui({
    key: 'procedure-groups',
    state: {
        group: null,
        editMode: [],
        lastAction: null
    },
    mergeProps: bindActionCreators({
        load: getProcedureGroup,
        save: saveProcedureGroup
    }, store.dispatch)
})(ProcedureGroupComponent);

I think what I want is something like the following.

export default ui({
    key: 'procedure-groups',
    state: {
        group: null,
        editMode: [],
        lastAction: null
    },
    // what I really want is something that takes a function or object. If object, automatically wrap it in bindActionCreators.
    actions: (dispatch) => {
        return  bindActionCreators({
            load: getProcedureGroup,
            save: saveProcedureGroup
        }, dispatch);
    }
})(ProcedureGroupComponent);

[codering]

I think the first implementation is OK, and you can use decorator to make that look more concise.
e.g: https://tonyhb.gitbooks.io/redux-without-profanity/content/ui_state.html

[anozaki]

If anybody is interested I've cleaned up my implementation and this is what I finally ended up with.

const uiConfig = {
    key: 'my-custom-config',
    state: {
        // ...
    },
    reducer: (state, action) => {
        // ...
    },
    mapStateToProps: (state, props) => {
        // ...
    },
    mapDispatchToProps: {
        // ...
    }
};
export class MyCustomComponent extends Reactive.Component {
    // ...
}
export default connect(uiConfig.mapStateToProps, uiConfig.mapDispatchToProps)(ui(uiConfig)(MyCustomComponent));

// ...
// in our implementation this line looks like this with custom connect wrapper.
export default connect(uiConfig)(MyCustomComponent);

We decided we would keep all the config at top to make it easier to read/modify the code.

@codering I actually don't like using decorator since there is no way to export the non decorated version. In my project we use the non decorated class to create a page with all the components on a single page to validate and test each component. Like a manual unit test page for components.

[gcazaciuc]

You can also check out https://github.com/gcazaciuc/redux-fractal which allows you to inject props dispatching custom actions.

[baerrach]

@anozaki You can use Recompose instead of decorators.
Then you can export the un-enhanced version of the component as well.
Plus you can group your HOCs into one compose() call.