Menu Sheet Overlay
Search Sheet

Redux Actions and Selectors Reference

    Important: Mobify projects that were generated after January 2019 do not include the push messaging technology described below. If you are maintaining a project that was generated before January 2019 that does include push messaging, we have left this documentation in place for you.

    Included here is a list of available Redux actions and selectors for Push Messaging. You may find these useful when integrating Push Messaging into your existing project or when creating your own Push Messaging component.

    Before you begin #

    Redux actions #

    The following actions are located in progressive-web-sdk/dist/store/push-messaging/actions


    import {subscribeOnClick} from 'progressive-web-sdk/dist/store/push-messaging/actions'

    Call this to subscribe the user to push notifications, by opening the system-ask dialog to ask for permissions. If the user has already granted or blocked permissions for this site, nothing will happen.

    Typically, this is added as the React onClick event handler for an interactive element like an opt-in button.


    import {channelOfferShown} from 'progressive-web-sdk/dist/store/push-messaging/actions'

    Call this when the user has seen a Push messaging component asking them to subscribe. Typically, this can be called inside the React componentDidMount lifecycle method.

    Reselect selectors #

    The following selectors are located in progressive-web-sdk/dist/store/push-messaging/selectors


    import {isSupported} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

    type: boolean

    Returns true if:

    You can use this to determine whether to show a Push messaging component or not.


    import {isSubscribed} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

    type: boolean

    Whether the user is already subscribed to Push messaging. You can use this to determine whether a “success” message is shown to the user instead of a button asking them to subscribe.


    import {canSubscribe} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

    type: boolean

    Whether the user can be subscribed to Push messaging. If this is false, it may mean the user has blocked permissions for push notifications on this site.


    import {getPageCount} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

    type: number

    The number of pages the user has seen, persisted over multiple visits to the site. You can use this to only show a Push messaging component after a certain number of pages have been seen, which could prove a higher level of engagement with the site.


    import {getStatus} from 'progressive-web-sdk/dist/store/push-messaging/selectors'

    import {MESSAGING_STATUS} from 'progressive-web-sdk/dist/store/push-messaging/constants'

    type: number

    The loading status of the Messaging feature. getStatus should always be compared to values from the MESSAGING_STATUS constants object (import instruction shown above). The MESSAGING_STATUS object has 3 values to compare against:

    MESSAGING_STATUS.LOADING // Messaging is loading
    MESSAGING_STATUS.READY // Messaging is ready to subscribe visitors
    MESSAGING_STATUS.FAILED // Messaging has failed to load

    Use this selector to determine whether to show a Push messaging component or not. For example, you could display a loading spinner if this selector is equal to MESSAGING_STATUS.LOADING or hide a Messaging component if this selector is equal to MESSAGING_STATUS.FAILED. See Building Your Own Opt-In Component for a detailed example which includes the use of the getStatus selector and the MESSAGING_STATUS constants object.