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
// 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 {