Handler polymorphism

Re-frame problems - Handler polymorphism

There may be cases when you need some event to behave slightly different if handled in different states.

Let's have some small application with 3 pages:

Home page

Home page has a global menu component which will be shared on other pages.

By clicking on "Users" menu, [:show-users] event will be triggered.

List page

List page shows users in the system. When user enters this page these actions are done:

• goto page
• reset users filter
• reset paging to the first page
• load page data

By clicking on username, [:show-user-detail user-id] will be triggered. On this example we can see that user @gutini is on the second page.

Detail page

will show user selected on list page.

By clicking on "Save changes" or "Cancel" button, user will be redirected back to the Users page. What's important we want to go back to the exact page number which we were navigated from to the detail page (go to page, load page data).

Sometimes it also makes sense to click on the global menu item "Users" (or "List" item in breadcrumbs) to do the same behavior (goto page, load page data) instead of the default one (go to page, reset filter, reset paging, load page data).

Solution 1: Event handler

You can either have 2 different events and parameterize menu component or have 1 event and parameterize event handler within re-frame DB.

Solution 2: Statecharts

In statechart you can shadow transition from the parent state by having the same state exit set. Let's look at diagram:

There are 2 goto users transitions. First is global and second one is used only if user is on the detail page.

Users page page has 1 transient state for reseting the filter and 2 modes:

• list
• detail

List displays list of users (users are loaded by AJAX call with current filter on enter phase).

Detail displays current user. This state shadows goto users transition. It goes straight to the list mode state and avoids reseting of the filter and paging.