Flux example

[hmeerlo]

Hi,

a working flux example would be very nice. I'm now fighting with the notion of a notification store and what it would contain. Especially if I add an alert for every notofication in the store, when would I then remove the notification from the store? Because for every notification added, all notifications in the store would be shown again.

/Herman

[thedodd]

+1 The example that is given in the README is very opaque and difficult to understand in context of an actual flux application.

[kromit]

+1 I am using redux and actions ´TOAST_INCOMING´ and ´TOAST_DISPLAYED´ for adding and removing messages from a "queue". The component reads the queue in ´componentWillUpdate´

componentWillUpdate(nextProps){
     nextProps.toast.items.forEach(item=>{

         this.refs.container.success(
             "test",
             "test", {
                 closeButton:true,
                 timeOut: 5000,
                 extendedTimeOut: 2000
             });

         const {dispatch} = this.props;
         dispatch(Actions.displayed(item.id)); // remove from toast queue
     })
}

The toasts are displayed but the close button and the timeouts are broken so the toasts are not removeable/usable.

any ideas?

[jerairrest]

Hello!

I've was able to come up with an implementation of react-toastr using redux that can be found here:

https://gist.github.com/jerairrest/bcfd0e6692e90625d8d1

To use the notification, simply dispatch the action 'displayNotification' with the needed title and message.

Let me know if you have any questions,

Jer

[kromit]

@jerairrest Thank you. This is quite the same approach I took, but it does not work with the default message factory (without jquery):

var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation);

[jerairrest]

Are your messages not removing? Or is it just the fact the animation doesn't work?

[jerairrest]

Have you included animate.css?

[Jekiwijaya]

@kromit I have the same problem too. What is the solution?