Fork me on GitHub
#re-frame
<
2020-06-09
>
andre05:06:39

> I'm looking for a re-natal-like template that works with shadow-cljs rather than figwheel https://github.com/flexsurfer/ClojureRNProject

andre05:06:49

with shadow its much simpler to run a new project and manage npm deps

Ashkan Banitalebi11:06:36

Hi, all I'm working on my first re-frame project, and I've been looking all over for a set of best practices in writing forms in re-frame . Right now, 3 main approaches are available: 1. using a reagent/atom or a plain atom to retain values entered in the form, and update! -ing it in element :on-change 2. using the app state and dispatch an event that changes db , updating and maintaining values there until it's time to submit. 3. Libraries (below) I was wondering if there is a better solution. I'm aware of different libraries, (`re-form`, re-frame-form, reagent-forms, duff, fork , etc.) but these do not seem to be vetted, largely used libraries. I searched, but never saw a general "best practice" guide, and as of now, my best solution seems to be reagent/atom, since it is versatile and adds minimum noise to the codebase. I was hoping if your experience is different, or if you can direct me to practices that I wasn't able to find. Thank you, -Ashkan

jkrasnay11:06:19

In my experience, forms are the hardest thing to get right in a Re-frame/Reagent project. I’ve settled on the following approach:

jkrasnay12:06:50

1. Create low-level, stateless Reagent components that accept a value to display and an on-change/`on-click` callback function.

jkrasnay12:06:25

2. Create a higher level form component that manages a map of values in a reagent/atom and takes a data structure that specifies which components to display. This form component renders the lower-level components while wiring their value and on-change properties to its value atom.

jkrasnay12:06:16

3. The form component can provide a submit button, where it runs any validations you need against values in its ratom, storing error messages back in the ratom or calling a callback with the values if everything is valid.

jkrasnay12:06:41

Sorry I don’t have any public code that I can point to but happy to answer any questions you have.

jkrasnay12:06:03

You should also look at re-com: https://github.com/day8/re-com

Ashkan Banitalebi12:06:19

thanks @U0DTSCAUU this is great help

valtteri13:06:11

If state is local to your form component r/atom is ok. But beware that the state is lost if the component unmounts. If you need the form state in other components or views I would stick it to app-db. I’ve had success with keeping my form-state in app-db. I only use ratoms for really local and usually small things.

solf14:06:05

The approach from @U0DTSCAUU seems close enough to https://github.com/luciodale/fork

👍 4