This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-09-29
Channels
- # beginners (42)
- # boot (12)
- # cider (3)
- # cljs-dev (277)
- # cljsrn (44)
- # clojure (127)
- # clojure-austin (9)
- # clojure-austria (1)
- # clojure-brasil (14)
- # clojure-canada (1)
- # clojure-dev (22)
- # clojure-dusseldorf (1)
- # clojure-italy (4)
- # clojure-russia (24)
- # clojure-spec (33)
- # clojure-taiwan (1)
- # clojure-uk (21)
- # clojure-ukraine (8)
- # clojurescript (134)
- # core-async (41)
- # core-logic (8)
- # cursive (1)
- # datomic (3)
- # ethereum (1)
- # events (4)
- # funcool (1)
- # leiningen (12)
- # off-topic (21)
- # om (19)
- # onyx (45)
- # overtone (1)
- # parinfer (2)
- # pedestal (3)
- # proton (2)
- # re-frame (103)
- # reagent (48)
- # test-check (27)
- # untangled (51)
- # vim (3)
@gadfly361 cheers. I was hoping that wasn't the case but its a good work around. thanks. ill give it a go today
@gadfly361 sorry that was a pseudocode typo
the output is still confusing. to clarify, it outputs (partial-component :b :c)
i was able to work around it by using a special partial application function, e.g.:
(defn partial-component [& partial-args]
(let [partial-vec (into [component] partial-args)]
(fn [& rest-args]
(into partial-vec rest-args))))
@kauko maybe not. But if your frontend application is interacting with anything outside itself, running the same sequence of events twice is not guaranteed to give the same result, right? So if you want to jump back to a prior app-db state, you'd have to store that state, lest you end up in an alternate timeline 🙂
Or is there something I'm missing?
You don't store side effecting things in the log. Only pure things. Side effecting things produce pure things.
I'm not sure I get it. If I'm a) reading the server's list of todo-items b) create a new item c) reading the list again Won't the state of c) depend on the side effect in b)?
Interacting with the server's db (outside of the domain of the frontend)
But I think I get it - receiving the response from the server should also be an event, and thus pure and recordable
Right?
I'm back on my laptop now, previous responses were pretty short because I was on mobile 😄
Impressive mobile typing skillz tho
But this is why we split these things into Actions and Effects, or something like that. The name doesn't matter, the split does
and it ends up creating an Effect that is replayable, something like [:rewrite-list payload]
So replayability depends on being vigilant about the split
Simple, but not so easy 🙂
Thank you for that - I had heard about recording events being sufficient, but it didn't click until now!
Yeah. It's definitely something that requires discipline. I feel like Carry's model makes it easier, since you have different places for both of them
well, actually I haven't tried Elm since they got rid of the Signals and whatnot, so maybe I shouldn't say too much about it
my site for Respo is up http://respo.site
How to write this: https://github.com/JedWatson/react-select/blob/master/examples/src/components/Multiselect.js#L48 with Reagent
?
This is my try:
(defn categories-select [data-atom categories]
(r/create-class
{:get-initial-state (fn [] (clj->js {:value []
:options [{:value 1 :label "one"}
{:value 2 :label "two"}]}))
:display-name "reactSelect"
:render
(fn [this]
(println "render")
[:> js/Select {:options (-> this .-state .-options)
:name "reactSelect"
:value (-> this .-state .-value)
:multi true
:simple-value true
:on-change
(fn [e]
(.setState this
(clj->js {:value
(conj (js->clj (-> this .-state .-value)) e)}))
(println "new state: " (.-state this)))}])}))
It updates (.-state this)
but in won't call render
function again so it won't take any effect.
Also, it would be helpful to find some more complex examples of r/create-class
usage.
This: https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components#form-3-a-class-with-life-cycle-methods
is good wrap up but it doesn't show how to handle internal state of component.@novakboskov thnx for sharing your code. Since you have a reference to data-atom you dont need to use local state: If options is dynamic it could come as a parameter of the function, and onchange it could swap! the value on the data-atom. And there's value-key and label-key to inform Select the keys of your options. This way a simple [:> js/Select .. will suffice.
@geraldodev But with local state it would be like this?
(defn categories-select [_ categories]
(let [selected (r/atom [])]
(fn [_ categories]
[:> js/Select {:options (mapv (fn [c] {:value (-> c :id str)
:label (:name c)})
@categories)
:name "reactSelect"
:multi true
:value @selected
:simple-value true
:on-change #(reset! selected %)}])))
Thanks!@novakboskov this mapv processing you are making is just necessary when categories is not a vector of [{:id 1 :name "one"} .. ]. Because if it is you do not need to process, pass the plain vector as options and supply :value-key :id and :label-key :name as parameters to js/Select, and it ll be fine. If categories is not to be changed it does not need to be an atom. a plain vector would be fine. The definition of selected (who is capturing inside) categories-select function is kind of limiting its use, because the objective of the function is to lay out how the "react dom" so this value also can be passed to the function. (defn categories-select [atom categories] . I didn't get why the _ parameter. With reagent the parameters are entirely up to you. That's the beauty of the library.
@geraldodev It looks to me like it accepts only strings as value-key
and my :id
s are integers. I've found :value-renderer
but then it's maybe the same.
@novakboskov It seems that reagent already transforms from cljs to js and value-keys can be integers and strings and booleans (that's for sure). as for labels I suppose the translation take of it.
Yup but then with :multi true
on-click
receiving a single value (immediately selected value) not a string of values separated by delimiter, like "1,2,3"
If it's receiving a sigle value you could (swap! selected conj value) ?
@geraldodev Sorry, it always provide string consisted of numbers separated by comma. I could gracefully do:
[:> js/Select {:options @categories
:value-key :id
:label-key :name
:multi true
:simple-value true
:disabled disabled
:value @sel-categories
:on-change (fn [e] (reset! sel-categories (u/str->num-vec e)))}]
@novakboskov simple-value is the one that triggers this behaviour isnt it ? when you turn off simple value what is the shape of the data ?
@geraldodev then it's the whole categories
element or many of them. Yes, value-key
and label-key
will take care of it but then I would have to extract :id
s by hand to put them in sel-catgories
.
@novakboskov [cljs-value (not-empty (js->clj value))] would get rid of [] when there are no selected item
The last example I did because I was curious how it works, and I'm also interested in react-select. I'm not using cursors directly. I'm using re-frame
@novakboskov this https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components have very good information about reagent
@geraldodev That's the link I've mentioned in my original question. It's good but don't say nothin about handling internal state.