Redux - Throttle an action so not fired so often - react-redux

I have an action creator that fires an action anytime a button key is pressed, however it fires too often especially when a user is typing in a field. In regular react you can use lodash and throttle or debounce that, is there a way to do this with Redux and the way it dispatches actions to throttle it?
I found one article on it https://medium.com/#leonardobrunolima/react-tips-how-to-create-a-redux-middleware-throttle-f2908ee6f49e but that did not work out for me, maybe I copied that example too literally any other examples or resources on this topic? I cannot find anything and any help would be appreciated.

Related

How to handle Flux action dependencies

I am working on a JS application using the Flux architecture. Among other things, the application displays a list of contacts and on each of them you can add or remove them from your contact book.
The application is doing optimistic UI updates, so in this case you can click on 'add' and see 'remove' right away while in the background we are doing the ajax request to add the contact.
However I do not know how to handle the case when someone clicks on 'remove' while we are still adding the contact. The 'remove' ajax request expects an ID that we do not have yet. It is also a requirement that I cannot grey out the 'remove' button while the request is running.
My ideal way I think would be to be able to dispatch actions that are dependent on other action. Is that a good idea, how can I implement that?... :/
Do you guys know how I should handle this case in a flux application architecture?
Optimistic updates are great -- but putting a "Remove" link that is incoherent makes no sense. Why not add the contact on the page but wait to add the "Remove" until you're notified by the store that the addition was successful?

Durandal App navigation issue

I have a Durandal App in an asp.net mvc project. It all works great but a few people mentioned the navigation didn't work. I then noticed that they were clicking on the links BEFORE the app was ready and the router was ready.
Does anyone have any suggestions as to how I can prevent the navigation being available until the app is ready?
You can throw up a full-screen scrim (or a block UI, as some people call it) that sits at a very high z-index, covering all content. You can even put a spinner within this scrim at the same z-index.
In the compositionComplete handler of your shell's viewModel, you can then hide the scrim. This proceeds on the assumption that the completion of routing and composition should signal the availability of your app. Bear in mind, though, that if you have AJAX calls (in the form of fetching data, etc.) that could tie up your app, you may need to align hiding the scrim to the completion of those calls instead. That should happen no earlier than compositionComplete.
The last sentence is a bit a tricky. Most of the time, you're fetching data in the activate handler, which is handled earlier than compositionComplete. There's no way to know if the AJAX fetch will complete before or after 'compositionComplete'. In these cases, it might make more sense to move the AJAX fetch to the compositionComplete handler so that you can better coordinate and time the hiding of the scrim to the completion of routing, composition, and fetching.

Handling basic ajax events in Primefaces Components

First of all I'm still learning the structure and how it works.
I searched around the web to get an suitable and easy answer to the following question:
Is there a way to regonize all other basic ajax events, like hovering and clicking on Primefaces Components?
For example, i would know the event which get invoked if you click on the previous or next button on an <p:schedule>. The documentation says there are only "dateSelect, eventMove, eventResize" and "eventSelect" as callable ajax events. But this is not enough, if you want to build an complex application and you combine an <p:calendar> with an <p:schedule>. There you need to know when the schedule switches the month or year.
I hope someone can give me an clear and understandable answer to this.
Thanks and best regards.
Since you did not specify what event you need, your answer is going to be as clear as the question.
The primefaces objects can only recognize the events they are programmed to. If you need to get a specific type of event, you can:
1) see if the primefaces support that event. put it in a <p:ajax tag, and see if it works.
2) see if the standard JSF ajax API support it.
3) If all else fails, you can try to put a jQuery script along with the page, to handle the event and make a call from the client side.
The <p:calendar and <p:schedule makes heavy use of jQuery plugins to render it, I doubt you can get the events on the month selector or anything else in the rendered interface without client-side jquery.

WP7 should we add event handler in XAML?

I 've seen many WP7 applications, some place event handlers in code, some place event handlers in XAML
Should we add event handler in XAML?
Does that handler automatically unsubscribe to the event when the page is navigated from ?
You can do either, it really doesn't matter! And no, you do not have to worry about adding / removing event handlers when the user navigates from one page to the next. When a page is no longer needed, it is destroyed.
The only time you might want to handle things differently is if you are using the MVVM pattern, when you might want to use commands rather than event handlers.

Suggestion for FullCalendar event removal UI

I have my fullCalendar functioning well, however, I need to allow the users to remove events from the calendar. I can use the clickEvent method to bring up a confirmation window with a "do you want to remove" message. But this seems kind of clunky. Is there a better UI way of removing events?
Google calendar uses a qTip on click that offers "edit event details" and "delete". At first I didn't like sending users to a different "event details page" but after thinking about this for awhile it is a really good way to go.
It is always safer to ask for a confirm before removing something.
Anyway you can customize the rendering of the event using the eventRender callback
In particular you can:
attach custom markup to render an X image that when clicked will ajax call a delete function
you can attach other jQuery plugins to reproduce exactly the qTip effect
Have a look at the link for more details. Hope it helps

Resources