Question: Notification component implementation

[igorprado]

Hi,

First of all, thanks for this boilerplate! It's awesome!

I've been playing with this and tried to implement a component that I created for notifications. I set this version using the component: https://isomorphic-react-app.herokuapp.com/

You can see the notifications when:

• Delete a user
• Add a user

When adding a user, sometimes it will fail and display a error notification and sometimes it will be success, just for simulation purpose. In case of fail, there is a button where the idea is re-do the action.

My concerns and goals here are:

• Ability to add a notification from a component action
• Respond to requests status passing a payload and listening in Notification Store.

As I'm new to Flux implementations, my question here is about the structure of the store and actions, if you guys think it's ok. The repo is here: https://github.com/igorprado/isomorphic-react-app

Thanks!

[cridenour]

Hey - I think this looks pretty good.

The only thing I would change is in UserActions.add(), I wouldn't pass along the structured notification object in the action unless you truly only think the NotificationStore is the only one that will ever consume the event.

If you passed just the user to UserActions.success() and maybe just the callback to UserActions.fail() and then have all the "notification logic" in the NotificationStore, that would be more in line with the Flux implementations I've seen.

[igorprado]

Thanks for the reply, @cridenour.

I agree with you. Indeed we can have more stores listening to requests actions in this case. I made several changes to the first approach. One is this: firing the notification action from UserActions.addSuccess() and UserActions.addError().

One of the biggest changes was: I created a notification store/action and notifications store/action. The notification action/store is responsible for fire a single notification. The notifications action/store is responsible to hold all notifications that were successfully added/removed after validations/animations of the notification component. I couldn't figure out a better way to do this.

Some of the things that I want to achieve (and achieved, at least until now) is:

• [x] Ability to fire notifications from a component or other actions;
• [ ] Ability to intercept error requests and fire a notification (API must follow a pattern of errors object so it can be consistent).

[iam4x]

@igorprado With Axios you can intercept requests, but careful since it's a singleton library on server side it won't fit great with multiple requests at same time.

I have an example of notifications into one of our product at work, I need to clean that and do a gist.

[igorprado]

Thanks @iam4x, it would be great!

Indeed a singleton pattern to achieve this may be a problem. I'll search more about it.

[jaredcat]

Thanks for bringing this to light. I didn't think/know about axios being singleton. Might also cause issues with our app.
What a good method of building a API library in this environment?