Fork me on GitHub
#reagent
<
2017-07-30
>
deadghost01:07:40

hmm with that counter in place, it looks like my nav gets re-rendered after every successful http request

deadghost02:07:15

still trying to pinpoint why exactly it does that

deadghost02:07:30

if an atom gets swapped with its current value, does it count as a change and cause a re-render?

mikethompson03:07:47

Note in particular, half way through where I explain: > Wait. Is that it? Why doesn't the [more-button counter] component rerender too? After all, its prop counter has changed???

deadghost03:07:15

yeah I've been poring over that the past few hours

mikethompson03:07:18

I haven't read that document in a long time. Realised it is slightly out of date in the Changed? section

mikethompson03:07:49

I'll make a quick update

deadghost08:07:04

ehhh are there any reasons why dispatch-sync would not load all the data before running the initial mount after it?

deadghost08:07:54

I'm using the dispatch-sync then initial render pattern

deadghost08:07:18

and it appears I'm getting the same results whether I'm using dispatch or dispatch-sync

deadghost08:07:38

I'm using a combination of http-fx, async-flow-fx, dispatch-n and perhaps one of those might not play nice with dispatch-sync?

deadghost08:07:05

Yep, it looks like it starts the dispatch but renders before the data is loaded

tibidat09:07:50

afaik dispatch-sync simply executes your handler directly, this doesn't apply to any effects your handler might have. So if you want your application to wait for data before rendering checkout https://github.com/Day8/re-frame/blob/master/docs/Loading-Initial-Data.md

deadghost09:07:49

@tibidat so does that mean it won't wait on event-fxs?

tibidat09:07:49

that is my understanding of it, yes

deadghost09:07:35

man, things sure do get complicated fast

mikethompson09:07:11

@deadghost it sounds as if you need to initiate a multi-step boot process, where some of the steps are async?

mikethompson09:07:35

Have I understood correctly?

deadghost09:07:27

it's a boot process that needs to load data via http in a certain order

mikethompson09:07:49

Yep, so the HTTP bit means there's async steps

mikethompson09:07:17

A round trip to the server

mikethompson09:07:51

dispatch-sync is a (slightly cheating) means of calling the event handler NOW rather than SHORTLY. It is a means of getting a certain state into app-db which might include setting a :booting? flag. But if that event handler ALSO returns effects which are themselves async then those processes will be kicked off, (HTTP GETs will be initiated) but the response will arrive later.

deadghost09:07:50

ok, so no avoidng setting a lot of flags

mikethompson09:07:45

We set :booting? flag in app-db to true. Then the views can render a starting twirly thing, conditional on that flag being true

mikethompson09:07:21

The final booting async process (HTTP GET?) sets that flag back to false

mikethompson09:07:51

Which causes the views to render the full app for the first time

mikethompson09:07:08

Lots of variations on that theme possible

deg10:07:03

@gadfly361 (or anyone else): I'm trying to port a small project from re-com to soda-ash. I'm a newbie to semantic-ui. Any good examples I can look at?

gadfly36110:07:55

@deg I dont have any open source projects that use it. However, did a github search and came across this, which is pretty minimal and easy to grok: https://github.com/Ionshard/gamegrue/blob/master/src/cljs/gamegrue/youtube/views.cljs

gadfly36110:07:03

your best resource will likely be the official sementic ui react docs tho: https://react.semantic-ui.com/introduction

deg10:07:28

I'm starting with an input field. Looks like a big conceptual difference between this and re-com is that re-com wraps a layer around getting values in and out of fields, while soda-ash and semantic-ui look much more like straight html?

gadfly36110:07:22

yeah, re-com is a little more opinionated and comes with some helpful things baked in like this: https://github.com/Day8/re-com/blob/master/src/re_com/misc.cljs#L119-L126

deadghost15:07:47

can I delay re-frame re-renders?

deadghost15:07:15

for example my nav starts at state {:foo 1 :bar 2}, does one http request that replaces that entirely with {:foo 1} => re-render 1 then does another http request that brings it back to starting state {:foo 1 :bar 2} => re-render 2

deadghost15:07:09

can I have the component cease re-rendering until both handlers complete?

mccraigmccraig16:07:49

@deadghost i would either use promise composition or re-frame-async-flow-fx to avoid delivering the intermediate state into your app-db

deadghost17:07:54

@mccraigmccraig how would you do it with async-flow-fx?

deadghost17:07:46

well I'm thinking I can use should-component-update

deadghost17:07:53

first request set a flag :update false or something, second request brings it to true and that triggers re-render

mccraigmccraig17:07:25

@deadghost i’ve not used async-flow-fx myself yet - i’ve always gone the promise composition route

deadghost17:07:39

oh I've been using it a bit

deadghost17:07:13

don't see how it can handle it

deadghost17:07:28

although I suspect forward-fx or whatever it was called can do the job

deadghost17:07:36

but it's already too complicated

deadghost17:07:55

probably will just go for flag/unflag + lifecycle method

mccraigmccraig17:07:20

it’s pretty easy with promise composition - i’m using the alet and mlet macros from cats with promesa

deadghost17:07:28

hmm thought this should suppress all re-renders :should-component-update (fn [] false)

deadghost17:07:37

doesn't seem to

benbot18:07:38

How would I call a function on a component? Like if i wanted to call postMessage on a WebView in re-natal.

deadghost18:07:20

>:should-component-update is not called when a component is re-rendered because a deref'ed atom changed (unfortunately, perhaps). It is only called when a component receives new arguments from a parent.