I am very new to redux and redux-observable so I would like to ask for some advice.
I am using redux-observable with rxjs to handle all my side effects which works very well.
I am using redux-form to handle form input and form validation that works also very well.
My problem is to integrate them together. My understanding is that redux-observable runs parallel to my ordinary actions creators so the action I invoke when I submit the form will always return without an error and my parallel running observable will yield a different action down the line if there was any issue with the submittion so I am not sure how I could handle it properly.
I found the following library. https://github.com/salsita/redux-form-actions
that looks like using a HOC to wrap the action with a promise. I am just wondering if that is the right way to go about it and how it works.
Can someone from the redux-form community check it out and let me know if it looks good. I do not have enough knowledge to make a call at this point as I wrote my first form today and I do not with to go down the wrong path.
Also an explanation how this works would be gratelly appreciated too / if there is a better approach.
I appreciate any comment or notes!
Thanks a lot !
The gist is, within onSubmit, pass a Promise's resolve/reject functions to a dispatched action. await on that promise. then, in your epic, call resolve/reject as needed to resume onSubmit's flow.
here's my PR explaining how it works, with a runnable example: https://github.com/redux-observable/redux-observable/pull/490
Related
Let's say I want to build a web app which would use templates in the form similar to the following:
<h1>
{ status_text[step] }
</h1>
<progress max="10" value="{ value[step] }">
</progress>
In other words, let's say that I have lists value[] and status_text[], change only the variable step over time and want the form to reflect these changes in the real-time (ideally, even without sending a notification from the code that changes step, so that I can use current_time instead of some artificial step). What technology should I use to implement such behaviour in the most elegant way? (for the main language, I'd prefer using Python but JS/PHP would also work if there's no Python-related solution)
Thanks in advance for any advice.
These kinds of task are always accomplished in the client side, In other words in JavaScript.
No matter you use PHP or Python for your backend logic, you need JavaScript to do that.
That said, if you want to use pure JavaScript or a library like jQuery, you will have to trigger an event on every change of the progress and update the value of the h1 Element. I don't think this is the best solution for you.
So I suggest you using AngularJs. it's one of the leading web development technologies. AngularJs data binding allows you to accomplish this very easily. No need to trigger events or any extra work. if you're interested in AngularJs, here is a link to get started.
I like to re-trigger validations after the form has mounted. Let's assume I like to run the validations each time I click a button named 'validate inputs'.
How to do this?
Related questions:
How to run validation on a slice of a redux-form FieldArray state
Is there a way in Redux Forms to make a form validate from code?
Manual redux-form validation is an oft requested feature, that does not seem to be provided at the moment.
My personal workaround is to trigger this.props.change('_validationHack', Date.now()) in the reduxForm-wrapped component and then remove values._validationHack in the onSubmit method before sending the values to the server.
It's not pretty, but seems to work without exception.
According to 28/11/2018:
https://redux-form.com/6.2.1/docs/api/actioncreators.md/
There are actions that you can dispatch for making changes to your form and triggering the validation method.
If you trigger change/touch actions it should execute the validate function.
This worked for me:
import { touch, stopAsyncValidation } from 'redux-form';
//...
yield put(stopAsyncValidation('CallForm', { mdn: mdn.error_message }));
yield put(touch('CallForm', 'mdn'));
clue from https://stackoverflow.com/a/51065315/588759
clue about touch https://github.com/redux-form/redux-form/issues/3992#issuecomment-399411329
working example https://github.com/zobroj/ab-web/blob/ea4fccb68b4f3a2f747f47d23624bc69631782ed/app/containers/RegisterPage/sagas.js#L62
found with https://github.com/search?l=JavaScript&q=%22yield+put%28touch%28%22&type=Code
The sync validation is run on every render, so "triggering it" doesn't really have much meaning.
If you would like to use async validation, there is a this.props.asyncValidate() function that you can call to trigger it.
OR, if you prefer submit validation, you could just submit the form.
I'm writing a restful redux/react app.
My desired output is such.
INPUT_CHANGE-->
(state = {valid: false})->REDUCER->(state = {valid: true})-->
AJAX CALL
From the redux documentation, async javacript is supposed to be called from the action creator, but I don't understand how to get to the action creator once the state changes from valid:false to valid:true.
Since this is a react app, I could change a hidden input called valid, which has an onChange action creator attached to it, but this seems like an unneccessary extra step. Any ideas?
My general preference is to have the action creators handle all async operations. So the validation operation in this question is comparable to the shouldFetchPosts function in http://rackt.org/redux/docs/advanced/AsyncActions.html
The action creator would then be something like inputChangeAndSubmitIfValid which corresponds to that file's fetchIfNeeded action creator.
On very rare occasions I implement an observer for catching store changes, but I always try to find a better action oriented way first.
We are extensively using Dojo's xhrGet and xhrPost in our application. This has been used across multiple JavaScript files. Now we need a uniform way in which we handle the exceptions that are returned from the server in case of an AJAX call. We don't want to handle this in all places where we are using Dojo's xhrGet or xhrPost. Is it possible to do that without disturbing any of the existing code? For example, when some exception is sent from the server as part of the ajax response, I need to display some message in a consistent way across the application.
Could you please suggest me a solution for this? Kindly let me know if any more information is required.
Use IO Pipeline Topics as I described in Generic Loading Icon in Dojo and you won't have to change your code at all.
did you look at the dojo/aspect or dojo/on ? You can define functions that get executed after a function was called (or before) with aspect.
Take a look at that:
http://dojotoolkit.org/reference-guide/1.8/dojo/aspect.html#dojo-aspect-after
Why dont you create a custom xhrArgs class using dojo/declare that has the same error function for all his children ?
http://dojotoolkit.org/reference-guide/1.8/dojo/_base/declare.html#dojo-base-declare
Lucian
We usually follow the convention of doing a redirect after every post, which is ideally very clean. But usually there is a requirement to give the user feedback about what has been updated.
When i do a post followed by get i wanna show the same page with the notification about the updation being done, which makes the GET very clumsy with the extra status of whats being updated. Am i missing something here?
which is ideally very clean
debatable.
which makes the GET very clumsy with the extra status of whats being updated
...and that's one of the main reasons why.
Trying to pass transactional data via the session is a very bad practice.
The solution I've used is to use a front controller for sequences of forms (not a front controller for the whole site!) but in general trying to avoid the scenario where there is a sequence of forms to be posted