redux-source-with-notify

< Back to Project WebCube

A React higher-order component for displaying notifications based on Redux states maintained by redux-source automatically

npm install --save redux-source-with-notify

It works great with redux-source-with-block-ui

Examples

• webcube-examples

Get Started

For redux-source's example:

// shopManageApp/containers/ShopList.js
import { connect } from 'react-redux';
import connectSource from 'redux-source-connect';
import withNotify from 'redux-source-with-notify';
 
import MyMessage, { myMessage } from '../components/MyMessage'
import { actions, shopsSource } from '../ducks/shops';
 
 
@connectSource(shopsSource, {
  slice: state => state.shops,
})
@connect({
  actions,
})
@withNotify({
  onSuccess: (ref) => { // `ref` is a reference to `MyMessage`'s DOM node
    myMessage.success('Success!')
  },
  onError: (ref, errors) => { // `ref` is a reference to `MyMessage`'s DOM node
    myMessage.error('Operation failed. Please try again or contact admin.')
  },
  sourceStateName = 'source',  // optional
  trigger: MyMessage, // optional
  disbleErrorLogger = false,  // optional
})
export default class ShopList extends PureComponent {

Or you can create a custom wrapper:

For example, we use React Notification System

// shopManageApp/hoc/withNotify.js
import NotificationSystem from 'react-notification-system';
import originWithNotify from 'redux-source-with-notify';
 
export default function withNotify(config = {}) {
  const {
    position = 'tc',
    successDuration = 2,
    errorDuration = 4,
    successText = 'Success!',
    errorText = 'Operation failed. Please try again or contact admin.',
    errorTexts = {},
    ...otherConfig
  } = config;
  return originWithNotify({
    onSuccess: notify => {
      if (successText) {
        notify.addNotification({
          message: successText,
          level: 'success',
          autoDismiss: successDuration,
          position,
        });
      }
    },
    onError: (notify, errors) => {
      errors.forEach(error => {
        const text = errorTexts[error.message] || errorText;
        if (text) {
          notify.addNotification({
            message: text,
            level: 'error',
            autoDismiss: errorDuration,
            position,
          });
        }
      });
    },
    trigger: NotificationSystem,
    errorTexts,
    ...otherConfig
  });
}

// shopManageApp/containers/ShopList.js
import { connect } from 'react-redux';
import connectSource from 'redux-source-connect';
 
import withNotify from '../hoc/withNotify'
import { actions, shopsSource } from '../ducks/shops';
 
@connectSource(shopsSource, {
  slice: state => state.shops,
})
@connect({
  actions,
})
@withNotify()
export default class ShopList extends PureComponent {