redux-container-builder

redux-container-builder

A simpler fluent interface to redux's connect with support for custom HOC's

API:

constructor(component)

Receives the react component to wrap.

mapStateToProps(mappingObject)

A shorthand version of redux's mapStateToProps. Each key in mappingObject describes a prop name, and each correspending value is a selector function that expects the redux state tree as a single parameter.

Calling this method or mapDispatchToProps() will wrap the component in redux's connect method.

mapDispatchToProps(mappingObject)

A shorthand version of redux's mapDispatchToProps. Each key in mappingObject describes a prop name, and each correspending value is a function that will be later invoked and wrapped with dispatch().

Calling this method or mapStateToProps() will wrap the component in redux's connect method.

withWrapper(hoc)

Attach a special one-off higher-order component. HOC's will be applied in the same order as the calls to withWrapper For a more powerful approach, check out Extending the builder.

build()

Builds the component!

Example:

import ContainerBuilder from 'redux-container-builder';

export default new ContainerBuilder(MonthlyExpenseReport)
    .mapStateToProps({
        report: getReport,
        groupedExpenses: getGroupedExpenses,
        isSaving: getIsSaving
    })
    .mapDispatchToProps({
        goBack: () => push('/'),
        saveReport: report => actions.save.request(report),
        tagCategory: ({ id, category }) => actions.tagCategory({ id, category })
    })
    .withWrapper(CustomHOCLibrary())
    .build();

Extending the builder:

It is possible to extend the container builder with your own methods, each one supplying a custom higher-order component you use often in your app.

This can be achived with a static method extend.

ContainerBuilder.extend(name, extendCallback, shouldRunBeforeConnect = false)

• name: The method name we will attach to the container builder.

• extendCallback: A function that accepts another callback as its single argument. This second callback must be passed a third function that can be invoked from every ContainerBuilder instance, and returns a custom HOC.

  After finishing nursing a new headache having imagined all these callbacks, please see the example below.

• shouldRunBeforeConnect: Should the HOCs constructed by the extension methods applied before (or above) the react-redux connect HOC. Pretty much only useful if your HOC uses redux-connect itself and its props must be updated before the original component's. (e.g. redux-fetch-on-mount)

Note: extend() calls can be chained.

Another Note: HOC's are applied to components in the same order that their factory methods are called on the ComponentBuilder instance.

Example - adding translations support to containers using react-i18next:

In order to tap into the translations capabilities of react-i18next, a higher-order-component must be applied to your react components. (Docs)

Here's how to extend ContainerBuilder with a custom "withTranslations" method that does just that:

boostrap.js:

import ContainerBuilder from 'redux-container-builder';
import { translate } from 'react-i18next';

    ContainerBuilder.extend('withTranslations', addToBuilder => {
                        addToBuilder(namespace => translate(namespace));
                    });
                    
...
ImportantComponent.js:

export default new ContainerBuilder(ImportantComponent)
    .withTranslations('ImportantComponent-translation-namespace')
    .mapStateToProps({
        report: getImportantDataSelector
    })
    .component;