Comments (13)
Oh of course, yes, I mean that I'd put one together. Hopefully early next week!
from react-final-form.
Another way to do it is to wrap actual action in promise and send resolve/reject with it.
submit(values) {
return new Promise((resolve, reject) => {
updateAction({ values, resolve, reject });
});
}
Then in saga you can call yield call(resolve, ...)
or reject.
So promises will be there and it will be possible to use .then(reset)
.
from react-final-form.
I came here with almost the same issue as @klis87, and thought I'd post my implementation using the FormAPI that's now available in the callback.
My form:
class LoginForm extends React.Component<Props> {
handleLogin = (credentials: Credentials, formAPI): void => {
const { reset } = formAPI
this.props.loginUser({ credentials, failureCallback: reset })
}
render() {
return (
<Form
// ... Omitted for simplicity, nothing fancy here
/>
)
}
}
My Sagas:
function* loginSaga(params: { credentials: Credentials, onFailure: () => void, onSuccess: () => void }): Saga<void> {
try {
// authenticateUser is a basic AJAX call that resolves on a successful login, rejects with bad credentials
const user = yield call(authenticateUser, params.credentials)
if (params.onSuccess) yield call(params.onSuccess)
yield put({ type: LOGIN_SUCCESS, payload: user })
} catch (error) {
if (params.onFailure) yield call(params.onFailure)
yield put({ type: LOGIN_FAILURE, payload: { loginError: error.message } })
}
}
I'm so used to promises that callbacks feel 'hacky' at this point, but I can't figure out a more elegant way to work with Redux.
@klis87, I'd be curious to see how you ended up doing this if you have any insights!
@erikras I'd second the request to have some kind of setSubmitError
method within the Form API (or even a setErrors
method that can be used on fields as well). I'm guessing that this would be an issue in the main final-form
repo, correct? Or, do you have any suggested ways to handle this?
from react-final-form.
Fantastic, thanks to both of you.
@erikras would it be helpful to make a Final Form + Redux-Saga example?
from react-final-form.
It could do this, but you already have a decent option available. Iām not sure we should provide six ways to do everything.
from react-final-form.
@erikras As mentioned in #21, you dont always have a luxury to use promises, for example when using redux-saga. What I am forced to do is below code:
let resetForm;
class EditUserDataForm extends Component {
handleSubmit = (values, setErrors) => {
this.props.editUser(values, setErrors, resetForm);
};
render() {
return (
<Form
onSubmit={this.handleSubmit}
render={({ handleSubmit, reset }) => (
<form
onSubmit={(e) => {
resetForm = reset;
handleSubmit(e);
}}
>
...
</form>
)}
/>
);
}
}
which I really don't like. I could also do this.resetForm = reset
, but still, I just feels like a hack because I don't have access to form wide actions in onSubmit
, whereas this is the place where those actions belong. We have an access to form values in Form.onSubmit
, and often we also need some form mutators, like setValidationError
(which we already have, but only to this one, which is not consistent), reset
, blur
, change
. And now, we need to create this bridge in form.onSubmit
. What I recommend is the following:
<Form
onSubmit={(values, { reset, setSubmitError, focus, blur, change, batch, mutators }) => {
...
}}
...
</Form>
where setSubmitError
is the old callback
. This is more or less how Formik
does this, which allows so much flexibility where this is often so needed - during the form submit.
from react-final-form.
@erikras how do you propose to handle callbacks when not disabling your submit on invalid? handleSubmit.then(reset) will not work if you never get to your onSubmit function to return the Promise.
@stunaz I wouldnt just pass reset to the onSubmit function, rather a set of actions (ie: formikBag)
from react-final-form.
I wouldnt just pass reset to the onSubmit function, rather a set of actions
Yes, this is obvious. The whole FormApi
could be provided, even.
from react-final-form.
Fixed published in [email protected]
and [email protected]
.
from react-final-form.
@good-idea I did it in similar way like you, just passing callbacks to redux actions. Passing callback is required due to how redux-saga works, final-form cannot help you with this, because you cannot know in component when a saga execution is finished - action wont return promise like in case of redux-thunk. For me this is not so much of a deal, but unfortunately saga and redux needs to use those provided form callbacks which really dont belong to redux, but to react and UI. As an alternative, see this library https://github.com/diegohaz/redux-saga-thunk , I didnt use it, but I might consider to check it out at some point.
from react-final-form.
Passing callback is required due to how redux-saga works, final-form cannot help you with this, because you cannot know in component when a saga execution is finished
Final Form does allow passing a callback. However, I don't know enough about Redux-Saga to know if that helps, but it is sort of the equivalent of having a setSubmitError
.
from react-final-form.
It would! But I'm not the one to do it. I'd be glad to link to it in the README.
from react-final-form.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from react-final-form.
Related Issues (20)
- Form Reset When Modal Close HOT 1
- Field State Sync Issue in Strict vs Non-Strict Mode in react-18 HOT 5
- Q: should readonly fields be validated on blur?
- Error in codesandbox example HOT 2
- Documentation for defaultValue of FieldProps is not matching implementation
- Warning message in console when using the field validation for a string field. HOT 3
- Ran into "is dirty" validation issues when state was used to autofill a form's input field. HOT 1
- [Feature Request] Add new prop to specify changes to specific form fields HOT 1
- change is not a function HOT 1
- Rewrite To Typescript HOT 2
- rerenderOnEveryChange for react-final-form
- <FormSpy> components rendering earlier than in previous versions
- DestroyOnUnregister incompatible with StrictMode in React18 HOT 2
- isEqual is initialized by the first field registered instance
- useField does not rerender component, when its props change
- Submitting Images in React Final Form
- I believe defaultValue should be the DEFAULT. That means, if NO initialValue was passed in, the defaultValue would be used. If there is an initialValue, it should override the defaultValue. One work around is using an OR in initialValues and skip using defaultValue all together like so:
- Form not dirty after removing items from FieldArray using final-form-arrays
- Field-Level validation for root and nested fields
- The field errors are still there, but the form errors are gone
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-final-form.