Comments (5)
This might be something that could be added to PromiseState.meta
Feels a little messy, but meta
is kind of designed as an escape hatch for some of these underlying things like this.
Another alternative might be to just use Promise.resolve()
to create a dummy Promise
. Don't know if it will work, but something like this:
handleSubmit(data => Promise.resolve(postProject(data)).then(resetForm))
from react-refetch.
Here is a working solution (although feels a little ugly):
<Form onSubmit={handleSubmit(data => {
postProject(data);
return postProjectResponse ? postProjectResponse.then(resetForm) : Promise.resolve();
})}>
UPDATE: actually it doesn't work. The problem is that when user submit the form for the first time postProjectResponse is not available and Redux Form doesn't return anything. After the second call it does work because now postProjectResponse is available. The only way to make it work properly is if postProject returns a promise.
from react-refetch.
I found a better approach. There is only one missing piece, can you help with the TODO?
class ProjectForm extends Component {
componentWillReceiveProps(nextProps) {
// TODO: call this.props.resetForm() on success (postProjectResponse.fulfilled)
}
render() {
const {
fields: { name },
handleSubmit,
postProject,
postProjectResponse: {
pending,
reason
} = {}
} = this.props;
return (
<Panel title="Add Project">
<PanelBody>
<Form onSubmit={handleSubmit(postProject)}>
{reason && <Alert type="danger">{reason}</Alert>}
<FormGroup error={name.touched && name.error}>
<Label>Name</Label>
<Input {...name} disabled={pending} />
</FormGroup>
<Button type="primary" submit disabled={pending}>
{pending ? <Spinner /> : 'Save'}
</Button>
</Form>
</PanelBody>
</Panel>
);
}
}
export default reduxForm(
{
form: 'project',
fields: ['name'],
validate: ({ name }) => {
return {
name: isEmpty(name) && 'Required'
};
}
}
)(connect(() => ({
postProject: data => ({
postProjectResponse: {
url: 'http://httpbin.org/post',
method: 'POST',
body: JSON.stringify(data)
}
})
}))(ProjectForm));
from react-refetch.
@hnordt How does that work if "Redux Form expects a promise to be passed to handleSubmit" ? On the TODO help, are you asking how to do that with the lib today or a feature request for fulfillment handlers? If it is the former, just compare this and next props for a change to postProjectResponse.fulfilled
.
from react-refetch.
Going to close this unless there is an active/open ask here.
from react-refetch.
Related Issues (20)
- Identity requests meta does not have component HOT 1
- Accessing the response body in case of reject HOT 2
- Posting data and having it return as a promise HOT 5
- impossible to update my props into react-refetch HOT 1
- Update Lifecycle Hooks for Future Async Rendering HOT 3
- skip/disable/remove fetch config conditionally HOT 4
- Doesn't support SSR HOT 5
- [idea] useRefetch HOT 5
- Refresh POST method request doesn' work HOT 1
- [Typescript] Type of "body" attribute must be string? and not object? on the Mapping interface
- Can you retry a failed request from within render? HOT 1
- Typings problem with PromiseStateMapping/FunctionMapping HOT 1
- Pass this.state.data to then(), catch(), andThen() and andCatch() functions for more powerful side effects HOT 2
- Override default behavior on failure of fetch with refreshInterval HOT 1
- Typescript types seem not to work properly HOT 9
- react 16.9, Warning: componentWillMount has been renamed, and is not recommended for use HOT 2
- Fetch rejected but reason empty HOT 2
- Example in README cannot be compiled in TypeScript HOT 1
- Is it possible to use a callback of a request? HOT 4
- Support for react@17 HOT 1
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-refetch.