Giter VIP home page Giter VIP logo

Comments (2)

dvdzkwsk avatar dvdzkwsk commented on April 28, 2024

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.

kolpav avatar kolpav commented on April 28, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.