Comments (2)
Without knowing how your redux state is setup, here are 2 options.
Idea 1
Just use redux state. redux-form passes through your props, so if you track isSubmitting
in your redux state you can just pass that in with your connect higher order component.
// imagine your `login` state looks (something) like this:
{
hasPendingLogin: boolean,
isAuthenticated: boolean,
user: ?Object,
}
// then you can just select that pending login state, since that would be tied to your login action
export default compose(
connect(
state => ({
initialModel: {...},
isSubmitting: state.session.hasPendingLogin,
}), {
onSubmit: login
}
),
reformed()
)(LoginForm)
Idea 2
You could write your isSubmitting
middleware as something like this:
// Note: I wrote this directly in github, so there could easily be a syntax error somewhere
const submittable = (WrappedComponent) => {
return class SubmittableComponent extends React.Component {
state = {
isSubmitting: false,
}
// we assume that `this.props.onSubmit` is a function that returns a
// promise. We can proxy the call to that function so that we can hook
// into the promise to set a loading state.
_onSubmit = (model) => {
this.setState({ isSubmitting: true })
return this.props.onSubmit(model)
.then((res) => {
this.setState({ isSubmitting: false })
return res
})
.catch((err) => {
this.setState({ isSubmitting: false })
throw err // re-throw so anybody handling this sees it fail correctly
})
}
render () {
return React.createElement(WrappedComponent, {
...this.props,
// we proxy `this.props.onSubmit`
onSubmit: this._onSubmit,
isSubmitting: this.state.isSubmitting,
})
}
}
}
Usage:
export default compose(
connect(
state => ({
initialModel: {...},
}), {
onSubmit: login
}
),
submittable, // <---------------
reformed()
)(LoginForm
Note that you could also use this to apply submitError
or submitSuccess
properties as well, if you wanted. The cool thing about this approach is that the only thing your onSubmit
prop must do is return a promise and any form with this wrapper will be able to accurately reflect the submission state.
Personally, if most of my app state was in redux, I'd lean toward the first solution of just leveraging redux for what it's designed to do because you do not want to start duplicating state across the app. If, however, this is not the case, solution #2 means you don't have to worry about creating a bunch of actions and reducers for things that you might not really care about on the global state.
Hope that helps.
from react-reformed.
What a quick response 😄
The first approach is what I was doing till now I don't even had to write complicated reducers actions etc.
I only stored name of a form currently being submited
(I don't need to store form values in redux store as my forms are very simple and few so isSubmiting
is only form state I need)
// form reducer //
export const initialState = null
export default handleActions({
[SET_FORM_SUBMITING]: (state, { payload }) => payload,
[CLEAR_FORM_SUBMITING]: () => null
}, initialState)
// selectors //
export const isLoginFormSubmiting = state => state === 'loginForm'
export const isRegisterFormSubmiting = state => state === 'registerForm'
// etc...
The second approach is what I wanted and I was so close to figuring out this myself but I could find a way how to proxy the onSubmit
. Your solution is perfect thank you!
from react-reformed.
Related Issues (12)
- Validation should take keep track of dirtyness HOT 3
- UMD release HOT 3
- Deprecation warning about PropTypes HOT 3
- Question regarding Complex validation based on state of the model
- I implemented a reformed component in Typescript. HOT 1
- Question regarding this vs. redux-form HOT 5
- How to implement "middleware"? HOT 3
- How about just intercepting setModel? HOT 5
- Question regarding patterns with autofill and server rendering HOT 6
- Suggestion to support updating nested properties HOT 1
- Forms without initial model cause React warning message HOT 2
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-reformed.