This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2017-02-02
Channels
- # aws-lambda (1)
- # beginners (46)
- # boot (190)
- # cider (12)
- # clara (6)
- # cljs-dev (9)
- # cljsjs (8)
- # clojure (152)
- # clojure-austin (3)
- # clojure-berlin (3)
- # clojure-finland (2)
- # clojure-france (5)
- # clojure-italy (3)
- # clojure-russia (92)
- # clojure-serbia (4)
- # clojure-spec (7)
- # clojure-uk (190)
- # clojurescript (115)
- # cursive (20)
- # datomic (20)
- # dirac (4)
- # emacs (9)
- # gsoc (5)
- # hoplon (1)
- # jobs (1)
- # klipse (4)
- # lein-figwheel (1)
- # leiningen (6)
- # lumo (2)
- # mount (18)
- # off-topic (57)
- # om (68)
- # om-next (14)
- # onyx (33)
- # perun (32)
- # portland-or (4)
- # re-frame (21)
- # reagent (85)
- # ring (6)
- # ring-swagger (23)
- # schema (1)
- # uncomplicate (1)
- # untangled (13)
- # vim (7)
Hi folks, I'm looking for a way to make a reaction from a vector ratom in order to run a fn for every element added to the vector, is this possible?
jfntn: I’m not sure exactly sure this is what you’re asking for, but have you seen reagent/track?
@U0VMXH0H1 thanks, didn’t see this one and it looks pretty close. If I understand the docstring correctly this does provide an abstraction for re-running a fn when an ratom changes, but what seems to be missing here for our use-case (and throught the reagent api AFAICT) is an efficient way to get at the novelty for the tracked ratom.
Right so in your example, the key distinction in what we’d like to achieve is that you wouldn’t reduce the entire atom every time, but you ‘d get the “sum so far” and the new value, and call + with that. Essentially go from linear to constant time updates
I haven’t run into a situation where performance is a bottleneck personally so haven’t needed this
you could probably do this with a make-reaction, re-frame had some examples of making reactions that were dependent on other atoms
Our app is basically one giant vector of events and a number of reductions that could be performed incrementally when new events are conj’ed so that would be a huge perf win
my guess would be to have two atoms, one with all the events, one with the final state of the reduction
yeah, basically I have a current app-state and an event-log, and a set of all the items that have been transacted into the current app-state
It seems like if we wanted this to work in our ideal case we’d need some sort of ratom compatible stream that’d have the values being conjed
Right, the way I see it working now is to have different atoms (or pieces of state in the db with re-frame) to represent the different reductions, and transactions need to make sure to update all the accumulators
Which is certainly not as nice as doing the mutation in one place and having the reductions update themselves
Oh you may be right: https://github.com/konukhov/redux-cljs
There’s a lot to like in reagent/re-frame though, so I’d rather find a way to make it work in that context
Datascript def looks like a good match, but we were kind put off by a bunch of people reporting how they hit a perf wall with it
Hi all, I’m finding that when my page first loads, there’s a noticeable delay before the JS loads and the app is rendered into my div. If I put some static content in the div like a spinner or something, will reagent overwrite it the first time it updates?
@cfleming yeah, you can do something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/loader.min.css"
rel="stylesheet"
type="text/css">
</head>
<body>
<div id="app">
<div class="ui active inverted dimmer">
<div class="ui text loader">Loading</div>
</div>
</div>
<script src="js/compiled/app.js"></script>
<script>foobar.core.main();</script>
</body>
</html>
@gadfly361 Great, thanks. I guess the same would apply if I pre-rendered the initial state of my app and hard-coded that in there, right?
@cfleming yeah, that should also work. if you go thru the trouble of pre-rendering your initial state, i find putting the initial state in to a var (something like state = { ... }) pretty useful when done with something like this in cljs
(defonce js-state
(try
(js->clj js/state :keywordize-keys true)
(catch js/Error e {})))
(defonce default-state
{ ... })
(defonce app-state
(reagent/atom
(merge js-state
default-state)))
if you are able to have a backend dynamically create an index.html file for you, then you can add a var to the head of the index.html ... my example above would assume something like this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var is_dev = true ;
var state = { ... };
</script>
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
<script>foo.core.main();</script>
</body>
</html>
@gadfly361 I like the loading spinner!
@pesterhazy thanks!
it's cool that they provide the spinner as a separate css file
Yeah, i do enjoy that semantic ui gives you the option to cherry-pick its components
Is it possible to completely re-mount a component when an argument changes? This would greatly simplify my component.
no that's not how react works
however, when props change the component-will-receive-props lifecycle method fires
you can performs side effects in that method
and remember that for the argument ratom to "change", you need to give a completely different ratom
exactly
if you want to react on changes to the ratom itself, you can use a trick
(defn outter [] (inner @ratom)) (defn inner [data] ...)
then inner
can react to component-will-receive-props when the ratom changes
Yes, it’s counter React, but I have some local state that depends on the atom. When the atom changes (and it is a completely different ratom, that’s what I’m sure of), the local state has to be adapted. Now I get around this via workarounds which are not so nice.
Btw I think it’s incorrect @kauko @pesterhazy. When you pass the same atom with different contents, it will trigger a re-render.
(defn component-with-atom-arg [a]
[:div
[:pre (pr-str @a)]])
(defn parent []
(let [a (ratom 1)]
(fn []
[:div
[:button {:on-click #(swap! a inc)}
"Click me"]
[component-with-atom-arg a]])))
@borkdude I sounds like we're talking past each other
of course component-with-atom-arg will be re-rendered -- the ratom changes
I’m not sure what I would do with in the side effect to re-mount the component though
you don't manually re-mount components in react; it's not possible
an updated component should be equivalent to a remounted one
yes, I agree with those statements, but it’s not how this component works unfortunately
(defn component [state]
(let [local-state (ratom (:foo @state))]
(fn [state]
[:p @local-state])))
I have something like this, but more complex. state
is a provided/shared Reagent atom. local-state
is also updated in the body of the component.
When you get a different state, local-state
doesn’t contain the right information anymore.But when you define the local-state
in the inner body, that obviously doesn’t work either.
yup you'll need to use :component-will-receive-props to update local-state when the state
prop changes
or I guess when state's contents change?
in which case the wrapper component mentioned above might help
in any case it seems like a relatively convoluted setup, maybe you can find a simpler path to your goal