CODEWITHSUNDEEP
javascriptreactjsreduxreact-router-redux
Fellow Stranger
Fellow Stranger

Reputation: 34053

Exporting value from Redux, making it global

I'm using redux-responsive as a help tool for creating a responsive design.

I'm getting a boolean prop whether the device has desktop width or not that I'm passing from Redux like this:

const mapStateToProps = (state) => ({
  desktop: state.browser.greaterThan.small,
})

This is defined in so many places all over the application that I'd like to skip mapStateToProps and export it once and importing it something like this instead:

import { desktop } from './someWhereInStore.js';

I wonder though how and where to export the desktop value in Redux?

Upvotes: 1

Views: 72

Answers (1)

Alexandre Annic
Alexandre Annic

Reputation: 10768

In one way or another you will have to connect your component to the store. You could implement a wrapper to factorize your mapping:

export function wrapper(WrappedComponent) {

    class WrapperComponent extends Component {

        render() {
            return <WrappedComponent
                {...this.props}
                desktop={this.props.desktop}
            />
        }
    }

    const mapStateToProps = (state) => ({
        desktop: state.browser.greaterThan.small,
    })

    return connect(mapStateToProps)(WrapperComponent);
}

And replace

const mapStateToProps = (state) => ({
  desktop: state.browser.greaterThan.small,
});    

connect(mapStateToProps)(...);

by

wrapper(...);

Upvotes: 1

Related Questions