Skip to content

Instantly share code, notes, and snippets.

@jerairrest
Created October 23, 2015 05:11
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save jerairrest/bcfd0e6692e90625d8d1 to your computer and use it in GitHub Desktop.
Save jerairrest/bcfd0e6692e90625d8d1 to your computer and use it in GitHub Desktop.
React-toastr Redux Implementation
import * as NotificationActions from './NotificationActionTypes';
export function resetNotification() {
return {
type: NotificationActions.RECEIVE_MESSAGE,
payload: Object.assign({}, {
title: "",
message: ""
})
}
}
export function displayNotification(title, message) {
return {
type: NotificationActions.RECEIVE_MESSAGE,
payload: Object.assign({}, {
title: title,
message: message
})
}
}
export const RECEIVE_MESSAGE = 'RECEIVE_MESSAGE';
import React, { Component } from 'react';
import toastr from 'react-toastr';
import { connect } from 'react-redux';
import _ from 'lodash';
import * as NotificationActions from './NotificationActions';
let {ToastContainer} = toastr;
let ToastMessageFactory = React.createFactory(toastr.ToastMessage.jQuery);
class Notification extends Component {
constructor(props) {
super(props);
this.addAlert = this.addAlert.bind(this);
}
componentWillReceiveProps(nextprops) {
if (this.props.notification.message != nextprops.notification.message &&
nextprops.notification.message != "") {
this.addAlert(nextprops.notification);
this.props.dispatch(NotificationActions.resetNotification());
}
}
render() {
return (
<ToastContainer toastMessageFactory={ToastMessageFactory} ref="container"
className="toast-container toast-bottom-right"/>
);
}
addAlert(message) {
this.refs.container.success(
message.message,
message.title,
{
timeOut: 3000,
extendedTimeOut: 1000
}
);
}
}
function mapStateToProps(state) {
return {
notification: state.app.data.notification
};
}
export default connect(mapStateToProps)(Notification);
import { combineReducers } from 'redux';
import * as NotificationActions from './NotificationActionTypes';
const initialState = {
message: "",
title: ""
}
function notification(state, action) {
switch (action.type) {
case 'RECEIVE_MESSAGE':
return Object.assign({}, state, action.payload);
default:
return state;
}
}
const reducer = combineReducers({
notification
});
export default reducer;
@phkavitha
Copy link

@jerairrest, Quick doubt. What's the use of checking whether old notification message is same as new one (https://gist.github.com/jerairrest/bcfd0e6692e90625d8d1#file-notficationcomponent-js-L19)? You already reset the notification state everytime. Hope I made myself clear.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment