re-frame

https://github.com/Day8/re-frame/blob/master/docs/README.md https://github.com/Day8/re-frame/blob/master/docs/External-Resources.md
jmckitrick 2020-10-12T14:10:50.078700Z

When handling a success or failure after an http-xhrio event, how can I prevent re-frame forwarding to a blank page? Is it as simple as a correct return value (true or false) from the event handler? That’s usually the case, but doesn’t seem to work.

2020-10-12T14:14:41.079600Z

The usual trick is to have the # as part of the base URL for your web app. That prevents the browser from trying to load a new page.

2020-10-12T14:15:19.080200Z

It’s typically a setting in your client side router (reitit, secretary, bidi, etc)

2020-10-12T14:17:30.081100Z

In reitit, for example, there’s an option called :use-fragment that you can set to true to automatically put the # in the right place.

p-himik 2020-10-12T14:24:23.082400Z

What do URL fragments have to do with the :http-xhrio effect? Redirecting to a blank page would make sense only if that URL is used for js/window.location. And even then, you would have to have something that displays an empty page.

p-himik 2020-10-12T14:24:49.083Z

@jmckitrick Are there any errors in the JS console in the browser?

p-himik 2020-10-12T14:25:38.083400Z

Either there are some errors or you're not describing the full picture.

jmckitrick 2020-10-12T14:25:44.083700Z

Here’s my base url: <http://localhost:3000/#/accounts>

jmckitrick 2020-10-12T14:26:09.083900Z

Let me try again and check for errors…

jmckitrick 2020-10-12T14:26:32.084200Z

I’m seeing all success messages in the console.

jmckitrick 2020-10-12T14:26:54.084900Z

I need to know more about the fragment issue

2020-10-12T14:27:37.086300Z

Sorry, I was assuming that if the page is redirecting to a blank page, the error would have to be upstream from the :http-xhrio effect. I should have been more explicit.

p-himik 2020-10-12T14:27:45.086700Z

@jmckitrick Then you're not describing the full picture. You said "forwarding" - what does it mean? Just a change in the UI? Or does the URL change as well? To what URL? And many other questions.

jmckitrick 2020-10-12T14:28:17.087600Z

Ok, I’ll try to add details… it’s a SPA, and other click/http events work fine.

jmckitrick 2020-10-12T14:28:25.088Z

This is a new one, using a ‘save’ button and a POST

jmckitrick 2020-10-12T14:28:41.088600Z

After clicking, the ‘on success’ handler is triggered, and the data are received correctly.

2020-10-12T14:28:45.088900Z

Your URL looks correct. If you’re not seeing anything in the web page, maybe something is happening to the contents of your app-db?

p-himik 2020-10-12T14:29:03.089500Z

Let's go into a thread to prevent spamming the whole channel.

jmckitrick 2020-10-12T14:29:04.089600Z

However, the screen goes white, to a basically empty page with just skeleton nodes

jmckitrick 2020-10-12T14:29:20.089700Z

ok, here…

jmckitrick 2020-10-12T14:29:38.090100Z

Before clicking, here’s the URL:

p-himik 2020-10-12T14:29:46.090500Z

Do you use :button inside of a :form?

2020-10-12T14:30:00.091100Z

I’ve had buggy reg-event-db handlers that failed to update app-db correctly and screwed up the display.

Lu 2020-10-12T14:30:19.091700Z

You need a (.preventDefault evt) on your form submit-handler

jmckitrick 2020-10-12T14:30:20.091900Z

good question, but no.

jmckitrick 2020-10-12T14:30:24.092100Z

Just input fields in a div.

2020-10-12T14:30:27.092300Z

For example, if it returns nil instead of returning an updated db

2020-10-12T14:30:43.092500Z

Oh, if you have form elements on your page, yeah, that could be doing it to.

jmckitrick 2020-10-12T14:30:52.092700Z

here’s the url before: <http://localhost:3000/#/accounts>

jmckitrick 2020-10-12T14:30:55.092900Z

and after:

jmckitrick 2020-10-12T14:31:00.093100Z

<http://localhost:3000/#/accounts>

2020-10-12T14:31:13.093600Z

With :http-xhrio you don’t need to use forms, you can just use inputs and buttons directly.

p-himik 2020-10-12T14:31:17.093900Z

OK, so the URL is the same. Then where does the white page come from? What renders it?

jmckitrick 2020-10-12T14:31:29.094300Z

I’m using a base setup from luminus template, which sets up re-frame and reitet front-end router

Lu 2020-10-12T14:31:36.094700Z

But it seems that he’s not returning db from the event actually it might be either

p-himik 2020-10-12T14:31:46.094900Z

Ah, my hate for templates is tingling. :)

2020-10-12T14:31:48.095100Z

Or like Lu said, add .preventDefault to the form submit handler.

p-himik 2020-10-12T14:31:58.095300Z

It doesn't matter what you use - check what is rendered.

jmckitrick 2020-10-12T14:31:59.095500Z

ok another clue

jmckitrick 2020-10-12T14:32:03.095700Z

The page is blank

jmckitrick 2020-10-12T14:32:11.095900Z

However, a force refresh brings it back up again

p-himik 2020-10-12T14:32:56.096100Z

It seems like you have something akin to

(when condition
   [main-app-component])
in your UI. And when that :http-xhrio effect is handled, something sets condition to false.

2020-10-12T14:33:18.096300Z

“Fragment” is just the part after the # in the URL. It’s designed to let web pages have a table of contents at the top of the page, with links to sections farther down the page.

jmckitrick 2020-10-12T14:33:29.096500Z

let me see..

p-himik 2020-10-12T14:34:01.096700Z

If the URL is not changing, then it means it's purely within your app's state and has nothing to do with requests. E.g. try to manually dispatch the event that fires when the request is successful - it should lead to the blank page just as well.

2020-10-12T14:35:03.096900Z

The part before the # is the web address of the page itself, and the fragment after the # is the name of an anchor tag within the page. So if the fragment is the only thing that changes, the browser stays on the same page and (in the old days) just scrolls to the section indicated by the fragment.

jmckitrick 2020-10-12T14:35:07.097100Z

ok

p-himik 2020-10-12T14:35:10.097300Z

BTW that "check what is rendered" is still meaningful even if you see a blank page. There might still be DOM elements (visible via regular DevTools) or React elements (visible via React DevTool extension).

2020-10-12T14:36:46.097500Z

Modern web apps hijack that functionality so they can use the fragment as the marker for different web app screens. It works really well, and you can even bookmark specific screens within your web app.

jmckitrick 2020-10-12T14:36:59.097700Z

I really dislike Chrome, but I’ll start it up and try the react devtools

jmckitrick 2020-10-12T14:37:59.097900Z

So.. after rendering, the react tools say I have the re_frisk element on the page and nothing else.

p-himik 2020-10-12T14:41:05.098100Z

Check your components, from the root down the path that is supposed to be rendered with that URL. Somewhere there should be a condition that's false.

p-himik 2020-10-12T14:41:39.098300Z

Also, check if you have any JS console filters in the browser - maybe there are errors but you have accidentally filtered them all out.

jmckitrick 2020-10-12T14:44:51.098500Z

Got it!

jmckitrick 2020-10-12T14:45:27.098700Z

It’s been a while, but I forgot the reg-event-db handlers need to return the updated db, and I had a console log statement as the last line in the function.

jmckitrick 2020-10-12T14:45:37.098900Z

Thanks for your help!

p-himik 2020-10-12T14:48:35.099100Z

Ha! Yep, that happens. :) HPH

jmckitrick 2020-10-12T15:06:26.099300Z

ok, thanks for that

jmckitrick 2020-10-12T15:06:56.099500Z

In the context of the reitit router, I don’t think I need to worry about it

2020-10-12T15:11:24.099700Z

Yeah, looks like you’ve got that all up and running correctly.

Chicão 2020-10-12T19:00:07.101400Z

Hello guys, I'm working on a project that uses re-frame, but there are some pages when I press F5 to reload the information / data on the page disappear and sometimes I have to click on the homepage again. Does anyone know anything I can read to better understand why this happens? I was comparing it with react and sometimes in an application with redux the data is there whenever I give F5, the actions are called again and saved in storage. Can I believe that event-fx is not being called correctly for this problem to be happening with the re-frame? ps: srry my bad english

p-himik 2020-10-12T19:13:20.102200Z

When you refresh the page, the app-db is created anew. It's a clean slate, that's it. Whatever you set to run when that particular page is loaded, will run, and the value of app-db will be created from that.

p-himik 2020-10-12T19:13:48.102400Z

I can't really suggest any reading other than the excellent re-frame documentation.

1👍
Chicão 2020-10-12T19:25:58.102700Z

Ok I'll read the documentation.. thks