A Higher Order Component using react-redux to keep form state in a Redux store

Overview

redux-form


You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux Form.


NPM Version NPM Downloads Build Status codecov.io Code Climate styled with prettier Twitter URL Patreon Backers on Open Collective Sponsors on Open Collective

redux-form works with React Redux to enable an html form in React to use Redux to store all of its state.


💰 Psst!! Do you know React and Redux? Sign up with Triplebyte to get offers from top tech companies! 💰


⚠️ ATTENTION ⚠️

If you're just getting started with your application and are looking for a form solution, the general consensus of the community is that you should not put your form state in Redux. The author of Redux Form took all of the lessons he learned about form use cases from maintaining Redux Form and built 🏁 React Final Form, which he recommends you use if you are just starting your project. It's also pretty easy to migrate to from Redux Form, because the <Field> component APIs are so similar. Here is a blog post where he explains his reasoning, or there are two talks if you prefer video. Formik is also a nice solution.

The only good reason, in the author's view, to use Redux Form in your application is if you need really tight coupling of your form data with Redux, specifically if you need to subscribe to it and modify it from parts of your application far from your form component, e.g. on another route. If you don't have that requirement, use 🏁 React Final Form.

Installation

npm install --save redux-form

Documentation

🏖 Code Sandboxes 🏖

You can play around with redux-form in these sandbox versions of the Examples.

Videos

A Practical Guide to Redux Form – React Alicante 2017
A Practical Guide to Redux Form – React Alicante 2017
Abstracting Form State with Redux Form – JS Channel 2016
Abstracting Form State with Redux Form – JS Channel 2016

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Issues
  • Slow with huge form

    Slow with huge form

    Hi! I'm having some perf issues with a huge form I'm dealing with. The form has 83 fields (yeah.. I know.. but it is what it is) and typing on any input is impossible, as the input lags/hangs to the point where it becomes unusable. For each key pressed, my component is rerendering. Is that the correct behavior?

    I tested with the redux-form demo website and it lags as well if you add enough fields to it:

    mwwgfj1

    See how the text appear in blocks of text, instead of one key after another. I captured this with 24fps, so it's not a gif issue.

    help wanted 
    opened by luisrudge 126
  • redux-form v6 API Proposal

    redux-form v6 API Proposal

    IMPORTANT This post is outdated, but I will leave it here for posterity.

    React v15 was released before I could get the next rewrite of redux-form published, so I had to release v5 as the Controlled Inputs update. The big rewrite will now be v6, but references to it below talk about v5.

    The initial alpha version of this proposal has been released:

    April 20, 2016 - v6.0.0-alpha.4 Release


    Greetings all,

    There are a number of feature requests, bugs, and performance issues that have caused me to rethink the design of redux-form. I'd like to use this issue as a way to introduce you to some of my thinking, prepare you for what's to come, and get your feedback. Hopefully at least one of the features will make you excited to migrate to v5 when it comes out.

    redux-form v5 API Proposal

    Glossary

    connected: subscribed to changes in the Redux store with connect()

    1. The form should not be connected

    When writing the initial API, I provided things that seemed convenient for small forms, like having this.props.values be the current state of the values of your form. This required having the wrapping form component to be connected to the Redux store, _and to re-render on every value change_. This doesn't matter if it's just a username and password form, but some of you are writing complex CRM systems with potentially hundreds of fields on the page at a time, causing redux-form to grind to a halt. #529

    So, what does this mean?

    • The convenience functionality of providing mapStateToProps and mapDispatchToProps is going away. You'll have to use connect() directly yourself.
    • But if the form isn't connected, then...

    2. Each field is connected

    Each field should subscribe only to the very specific slice of the Redux state that it needs to know how to render itself. This means that redux-form can no longer only provide you with props to give to your own inputs.

    import React, { Component } from 'react'
    import { reduxForm } from 'redux-form'
    
    @reduxForm({
      form: 'login',
      fields: [ 'username', 'password' ]
    })
    export default class LoginForm extends Component {
      render() {
        const { fields: { username, password } } = this.props
        return (
          <form>
            <input type="text" {...username}/>     // <--- can no longer use this syntax
            <input type="password" {...password}/> // <--- can no longer use this syntax
          </form>
        )
      }
    }
    

    So what do we do? The destructured props was one of the most elegant things about redux-form!

    There are three options that I want to support:

    2.1. On-Demand Field Structure

    The redux-form user base seems pretty divided on how much they like providing the list of fields for the entire form, so I want to provide away to arbitrarily specify the path to your field at render-time. This can be done with a <Field/> component that is given the name of the field in dot.and[1].bracket syntax.

    import React, { Component } from 'react'
    import { reduxForm, Field } from 'redux-form'
    
    @reduxForm({
      form: 'userInfo' // <----- LOOK! No fields!
    })
    export default class UserInfoForm extends Component {
      render() {
        return (
          <form>
            <Field
              name="name" // <---- path to this field in the form structure
              component={React.DOM.input} // <---- type of component to render
              type="text"/> // <--- any additional props to pass on to above component
    
            <Field name="age" component={React.DOM.input} type="number"/>
    
            <Field name="preferences.favoriteColor" component={React.DOM.select}>
              <option value="#ff0000">Red</option> // <--- children as if it were a <select>
              <option value="#00ff00">Green</option>
              <option value="#0000ff">Blue</option>
            </Field>
          </form>
        )
      }
    }
    

    2.1.1. Custom Input Components

    Another key feature of redux-form is the ability to very simply attach custom input components. Let's imagine a hypothetical input component called SpecialGeolocation that requires the following props:

    location - the location to display, in a colon-delimited 'lat:long' string onUpdateLocation - a callback that is given the new 'lat:long' string

    Let's further complicate the matter by requiring that we save our location in a { latitude, longitude } json object. How would we use this component in redux-form v4.x and v5?

    Well, given the extra string-to-json requirement, we need a complimentary pair of format and parse functions. We need these in _both_ v4.x and v5!

    const format = jsonLocation => `${jsonLocation.latitude}:${jsonLocation.longitude}`
    const parse = colonDelimitedLocation => {
      const tokens = colonDelimitedLocation.split(':')
      return { latitude: tokens[0], longitude: tokens[1] }
    }
    

    In v4.x we map the props manually...

    // v4.x
    const { fields: { myLocation } } = this.props;
    // ...
    <SpecialLocation
      location={format(myLocation.value)}
      onUpdateLocation={value => myLocation.onChange(parse(value))}/>
    

    ...and in v5 we have to specify a mapProps function to do it.

    // v5
    <Field
      name="myLocation"
      component={SpecialLocation}
      mapProps={props => ({
        location: format(props.value),
        onUpdateLocation: value => props.onChange(parse(value))
      })}/>
    

    Simple enough, don't you think?

    2.2. Provided field structure

    The benefit of providing your fields array as a config parameter or prop to your decorated component is that redux-form, as it does in v4.x, can provide you with the connected field components as props. So, whereas the this.props.fields provided to v4.x were the props to your input components (value, onChange, etc.), in v5 they are now the Field components (see 2.1 above) which will apply those props to an input component of your choosing.

    import React, { Component } from 'react'
    import { reduxForm } from 'redux-form'
    
    @reduxForm({
      form: 'userInfo',
      fields: [ 'name', 'age', 'preferences.favoriteColor' ]
    })
    export default class UserInfoForm extends Component {
      render() {
        const { fields: { name, age, preferences } } = this.props
        return (
          <form>
            <name component={React.DOM.input} type="text"/>
            <age component={React.DOM.input} type="number"/>
            <preferences.favoriteColor component={React.DOM.select}>
              <option value="#ff0000">Red</option>
              <option value="#00ff00">Green</option>
              <option value="#0000ff">Blue</option>
            </preferences.favoriteColor>
          </form>
        )
      }
    }
    

    2.2.1. Custom Components

    You can do the same thing as described in 2.1.1 above with these fields.

    <myLocation
      component={SpecialLocation}
      mapProps={props => ({
        location: format(props.value),
        onUpdateLocation: value => props.onChange(parse(value))
      })}/>
    

    2.3. Convenience Inputs

    All that component={React.DOM.whatever} boilerplate is pretty ugly. In v5, I want to provide convenience properties. These will be provided using memoized getters, so they will only be constructed if you use them. The use of getters means saying a not-so-fond farewell to IE8 support. React is dropping its support, and this library will as well.

    Look how concise and elegant this is:

    import React, { Component } from 'react'
    import { reduxForm } from 'redux-form'
    
    @reduxForm({
      form: 'userInfo',
      fields: [ 'name', 'age', 'preferences.favoriteColor' ]
    })
    export default class UserInfoForm extends Component {
      render() {
        const { fields: { name, age, preferences } } = this.props
        return (
          <form>
            <name.text/>  // <input type="text"/>
            <age.number/> // <input type="number"/>
            <preferences.favoriteColor.select>
              <option value="#ff0000">Red</option>
              <option value="#00ff00">Green</option>
              <option value="#0000ff">Blue</option>
            </preferences.favoriteColor.select>
          </form>
        )
      }
    }
    

    All of the types of <input/> will be supported as well as <select> and <textarea>. These will be able to handle special quirks about how checkboxes or radio buttons interact with data.

    2.3.1. Submit and Reset buttons

    Just like the fields, this.props.submit and this.props.reset button components will also be made available, with flags for common functionality you might expect, e.g. disableWhenInvalid. More on form submission below.

    3. Displaying Errors

    Also as a getter on the field objects, like in 2.3 above, there will be an error component that will output a <div> with the error message.

      render() {
        const { fields: { name, city, country } } = this.props
        return (
          <form>
            <name.text/>
            <name.error/> // will only show if there is an error and the "name" field is "touched"
            <city.text/>
            <city.error showUntouched/> // will always show if there is an error
            <country.text/>
            <country.hasError> // allows for larger structure around error
              <div>
                <strong>OMG, FIX THIS!</strong>
                <country.error/>
              </div>
            </country.hasError>
          </form>
        )
      }
    

    4. Sync Validation

    The move in v5 to decentralize the power from the outer form element to the fields themselves proves a problem for how redux-form has historically done sync validation, as the form component cannot rerender with every value change.

    4.1. Sync Validate Entire Record

    Traditionally, your sync validation function has been given the entire record. I would still like to have a "validate this entire record" functionality, but it is going to have to move to the reducer, and the reducer will store the sync validation errors in the Redux state.

    4.2. Sync Validate Individual Fields

    Many redux-form users over its lifetime have requested the ability to put required or maxLength validation props directly on the input components. Now the redux-form is controlling the field components, it makes perfect sense to do this. v5 will attempt to use the same props as defined in the HTML5 Validity spec, as well as to set the errors directly onto the DOM nodes with setCustomValidity() as defined by said spec. #254.

    5. Async Validation

    For async validation, you will have to specify which fields will need to be sent to the async validation function so that redux-form can create a non-rendering connected component to listen for when those fields change, similar to asyncBlurFields works in v4.x, except that the async validation function will only receive the fields specified, not the whole record.

    5.1. Debounce

    I'm not certain of the API yet, but some mechanism for allowing async validation to fire on change (after a set delay), not just on blur, will be provided. I'm open to suggestions.

    6. Normalizing

    Since sync validation is moving to the field components, I think it makes sense for normalizers to be there as well. Something like:

    <username.text normalize={value => value.toUppercase()}/>
    

    What I liked about normalizing being on the reducer in v4 was that your value would get normalized even if it was modified from some non-field dispatch of a CHANGE action, but I don't think that was happening very often in practice. It can certainly be added back in the future if need be.

    7. Formatters and Parsers

    Formatters and parsers are the first cousins to normalizers. Say you want to display a phone number text field in the format (212) 555-4321, but you want to store the data as just numbers, 2125554321. You could write functions to do that.

    <shipping.phone
      format={value => prettyPhone(value)}
      parse={value => value.replace(/[^0-9]/g, '')}/> // strip non numbers
    

    The formatter is taking the raw data from the store and making it pretty for display in the input, and the parser takes the pretty input value and converts it back to the ugly store data.

    8. ImmutableJS

    Many of you have been holding your breath so far hoping I'd get to this. :smile:

    I've gone back and forth and back and forth on this topic. I rewrote the whole reducer to use ImmutableJS, and the rewrote it in plain js objects several times. I'm certain of the following things:

    • ImmutableJS has a very important role to play in Redux and making fast React applications
    • It's not faster than plain objects for small structures
    • A library like redux-form should NOT require that its users keep their Redux state as ImmutableJS objects
    • Using ImmutableJS internally and giving the state back with toJS() is a terrible idea.

    So, in conclusion, I'm officially forbidding the use of ImmutableJS with redux-form. Deal with it.


    :stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye: Nah, I'm just kidding. I've actually solved this problem. :stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye:

    If you do this...

    import { reduxForm } from 'redux-form'
    

    ...then redux-form will keep all its internal state in plain javascript objects, doing shallow copies up and down the tree to not mutate the objects that don't need to change (be rerendered).

    But, if you do this...

    import { reduxForm } from 'redux-form/immutable'
    

    ...then redux-form will keep _all its internal state_ in ImmutableJS objects.

    I've managed to hide the internal state structure behind a minimal getIn/setIn façade enabling the same reducer code to work on both types. This has taken up most of my effort on v5 so far, but it's working beautifully with extensive tests.

    9. Separation of Values and Form State

    As a library user you shouldn't care too much about this, but many of the problems and bugs (#628, #629, #662) that v4.x has suffered from have been a result of the internal state structure being like this:

    // example state in v4.x
    {
      firstName: {
        initial: 'Erik'
        value: 'Eric',    
        touched: true,
        submitError: 'Not the most awesome spelling'
      },
      lastName: {
        initial: '',
        value: 'Rasmussen',
        touched: true,
        submitError: 'Sounds too Scandinavian'
      }
    }
    

    In v5, the initial values, current values, and field state will be kept separate.

    // example state in v5
    {
      initial: {
        firstName: 'Erik',
        lastName: ''
      },
      values: {
        firstName: 'Eric',
        lastName: 'Rasmussen'
      },
      fields: {
        firstName: {
          touched: true,
          submitError: 'Not the most awesome spelling'
        },
        lastName: {
          touched: true,
          submitError: 'Sounds too Scandinavian'
        }
      }
    }
    

    This will make the RESET action literally just do this:

    return {
      values: state.initial,
      initial: state.initial
    }
    

    It will also enable things like subscribing to all the form values if one choses to. Such a decorator will be provided if only to enable the library demos.

    10. Form Submission

    "But!", you say, "If the form component isn't connected, how can it submit the values from the form component?"

    This was a big problem with this inversion of control, but I have invented a way for a large outer component to be able to read values from the Redux store without being directly connected, and therefore rerendering on every value change. This should allow for a handleSubmit() paradigm similar to v4.x, but I haven't gotten to proving that yet.

    11. What is going away?

    I think the only functionality that going away is formKey and reduxMountPoint

    11.1. formKey

    formKey dates back to before you could specify form as a prop (it used to only be a config parameter). It was designed to allow you to use the same form shape multiple times on a page, but you can do that with form. The only thing stopping the removal of formKey before was normalizers, but since they are moving to the fields (see 6 above), formKey can be laid to rest.

    11.2. reduxMountPoint

    reduxMountPoint was obsoleted by the more flexible getFormState(), which v5 will still have.

    12. Documentation, Examples, and Website

    I'm not happy with how the examples are currently implemented on the redux-form site. I like how the Redux examples are each in their own little folder that can be run individually. For v5, I want to meet the following goals for the docs:

    • Documentation exists in the master branch in a way that is navigable entirely on Github
    • Examples in their own folder in the master branch in a way that can be run locally with npm install and npm start
    • That same documentation (literally the same markdown files) navigable on redux-form.com
    • Those same examples running in separate little single-page apps on redux-form.com. They will be separate apps to demonstrate how some of them use third party libraries, like ImmutableJS or MaterialUI.
    • Enable anchor linking to specific parts of the docs. This means the docs can't be a single-page app with React Router anymore, due to github.io forcing the use of hashHistory.
    • redux-form.com hosted on github.io, which only hosts static files.

    That is not an easy requirements list to hit, but I've figured out a way.

    13. Roadmap

    The following will not make it into the release of v5, but v5 is being designed with these future features in mind.

    13.1. Custom Library Extensions

    In the same way that the standard inputs in React.DOM will be provided as convenience properties (see 2.3 above), redux-form v5 will (eventually) allow extensions to be applied via third party extension libraries to make it easy to use a third party input library. So imagine something like this:

    import { reduxForm } from 'redux-form'
    import reduxFormMaterialUi from 'redux-form-material-ui'
    import MenuItem from 'material-ui/lib/menus/menu-item'
    
    reduxForm.extend(reduxFormMaterialUi)
    ...
    <form>
      <name.muiTextField hintText="Hint text"/>
      <meeting.start.muiTimePicker format="24hr"/>
      <preferences.favoriteColor.muiSelectField>
        <MenuItem value="#ff0000" primaryText="Red"/>
      </preferences.favoriteColor.muiSelectField>
    </form>
    

    React Native is the most obvious extension, but any input library could be done. React Bootstrap, React Select, Belle, Date Pickers, Wysiwyg editors, etc. could all be done in this way.

    One thing I'm not 100% sure about is whether or not extensions should be allowed to overwrite the built-in convenience components, like text or password, or if they should be prefixed as in my example above. Opinions welcome.

    13.2. HTML5 Validity

    It's possible that the actual setCustomValidation() stuff mentioned in 4.1 above will not make the initial release.

    Conclusion

    As you can see, I've been putting some thought into this. Thank you for taking the time to read through it all. If you see any glaring mistakes or think something should be done differently, I am very open to constructive criticism. I'm pretty excited about these changes, and I hope you are, too.

    discussion 
    opened by erikras 101
  • Form values not initialized from initialValues until 2nd render cycle

    Form values not initialized from initialValues until 2nd render cycle

    We have been struggling w/ this for a while now and following some of the related issues. I'm not sure if our problem is directly related to these others or not (using release 4.1.6):

    • https://github.com/erikras/redux-form/issues/176
    • https://github.com/erikras/redux-form/issues/578

    To summarize, we are finding that values are not being initialized until the second render cycle for our reduxForm-ed components. Example being that none of the following properties would be initialized until the first call of componentWillReceiveProps (i.e. the 2nd render):

    • props.fields.someField.value
    • props.values.someField

    Although, the following properties are initialized (even for the 1st render cycle) according to initialValues

    • props.fields.someField.defaultValue
    • props.fields.someField.initialValue
    • etc...

    My question would be, is what I've described above the expected behavior from redux-form? This causes issues for us where children component who depend on valid props being passed down to them receive undefined on the 1st render cycle and we can not rely on the "values" being reliably initialized.

    We have resorted to something similar to

    render() {
      if (typeof values.someField === 'undefined') {
        return null;
      }
    
      // ...
    }
    

    but then we can not rely on componentDidMount, etc...

    I will make an effort to circle back and try and clarify this issue. I just want to get this out there for possible discussion. Any feedback/advice is much appreciated!


    Here is some mostly-valid code below to illustrate the issue we have been experiencing

    const SomeForm = React.createClass({
    
      componentWillMount() {
        const {values} = this.props;
        if (typeof values.someString === 'undefined') {
          // All values = undefined
          // props.fields.someString.defaultValue is set as expected
          // props.fields.someString.initialValue is set as expected
          debugger;
        } else {
          debugger;
        }
      },
    
      componentDidMount() {
        const {values} = this.props;
        if (typeof values.someString === 'undefined') {
          // All values = undefined
          // props.fields.someString.defaultValue is set as expected
          // props.fields.someString.initialValue is set as expected
          debugger;
        } else {
          debugger;
        }
      },
    
      componentWillReceiveProps(newProps) {
        const {values} = newProps;
        if (typeof values.someString === 'undefined') {
          debugger;
        } else {
          // Values initialized on 1st call (2nd render)
          debugger;
        }
      },
    
      render() {
        const {
          fields: {someString, someArray, someObject},
        } = this.props;
    
        return (
          <div>
            <ComponentUsesSomeString
              value={someString.value}
              onChange={someString.onChange}
            />
            <ComponentUsesSomeArray
              value={someArray.value}
              onChange={someArray.onChange}
            />
            <ComponentUsesSomeObject
              value={someObject.value}
              onChange={someObject.onChange}
            />
          </div>
        )
      }
    
    });
    
    const ReduxFormedSomeForm = reduxForm(
      {name: 'SomeForm', fields: ['someString', 'someArray', 'someObject']},
      (state) => {
        return {
          initialValues: {
            someString: 'Some String',
            someArray: ['some', 'array'],
            someObject: {a: 'some', b: 'object'},
          },
        };
      }
    )(SomeForm);
    
    const App = React.createClass({
      render() {
        return (
          <div>
            <ReduxFormedSomeForm />
          </div>
        )
      }
    })
    
    bug 
    opened by erikthedeveloper 92
  • [React 15.2.0] Additional props warning

    [React 15.2.0] Additional props warning

    It will be interesting to see, when React 15.2.0 is released, how many of these warnings redux-form generates. More info and discussion here from the page the warning links to:


    The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

    There are a couple of likely reasons this warning could be appearing:

    1. Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.
    2. You are using a non-standard DOM attribute, perhaps to represent custom data. Custom data attributes should always have a data- prefix, as described in https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
    3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered.

    Props like valid, invalid, dirty, and pristine might cause warnings for cases where someone is just destructuring the field object into an input, i.e. <input type="text" {...firstName}/>.

    discussion 
    opened by erikras 85
  • [WIP] Typescript definition for v6

    [WIP] Typescript definition for v6

    Typescript definition for v6 RC 4

    This allows users to have the definitions just from installing the repo from npm, which is 👍 👍 💯 .

    @erikras I don't mind helping maintain this, if you would just ping me before release I can do the definition updates. Or you can do them yourself and I can look over them :) It should be pretty easy to do small tweaks.

    This is very close to complete. I just need to test:

    • [ ] FieldArrays
    • [ ] Reducer plugin
    • [x] validate's 2nd parameter (may have been a bug that was fixed)

    @blakeembrey Would love your thoughts and verification that I'm doing the react dependency right.

    EDIT: Updated for RC4

    opened by CarsonF 78
  • React v16.13.0 - Field validation is triggering a

    React v16.13.0 - Field validation is triggering a "Warning: Cannot update a component from inside..."

    Subject of the issue

    After React update to v16.13.0 Field validation is triggering

    Warning: Cannot update a component from inside the function body of a different component.
    

    on initialize and on input.

    Steps to reproduce

    1. Go to https://codesandbox.io/s/redux-form-simple-example-nn8nv
    2. Start typing in the input.
    3. Warning appears in console.

    Other information

    React v16.13.0 changes https://reactjs.org/blog/2020/02/26/react-v16.13.0.html#warnings-for-some-updates-during-render

    bug needs sandbox unclear-clarification-required 
    opened by igodorogea 56
  • How to make it work with react-select

    How to make it work with react-select

    Hi, aswome work!, i am trying to use this with react-select but when the control loses focus it also loses its value, is there a way to make redux-form play ball with react-select ?

    opened by Agamennon 56
  • Async validation failing causes Uncaught promise error

    Async validation failing causes Uncaught promise error

    The link in the docs to rc.3 is broken but you can see this in rc.2

    Go to http://redux-form.com/6.0.0-rc.2/examples/asyncValidation/ and fail the validation. You will get a undefined:1 Uncaught (in promise) Object {username: "That username is taken"} error

    opened by kristian-puccio 54
  • [V6] Anyone created a typescript definition file for v6 yet ?

    [V6] Anyone created a typescript definition file for v6 yet ?

    Just read through the state and I think v6 shows lots of promise over starting this project with v5 at moment.

    I can start with a super basic one and fill out bits as I go but I have little experience yet with creating definitions and I'd probably leave things loser than they could be.

    opened by rluiten 54
  • Example for file Upload

    Example for file Upload

    Hey! awesome work with redux-form!

    I'm using it at production, and I'm going to use it for file inputs, but I would appreciate an example or ideia of how it would be done with redux-form.

    thanks!

    opened by sebas5384 54
  • Radio field never gets touched with MUI - cannot validate

    Radio field never gets touched with MUI - cannot validate

    Radio field never gets touched

    Validation is not triggering as the field never gets touched as in meta.touched. So the form will submit without the required radio button being selected.

    Your environment

    | Software | Version(s) | | --------------------- | ---------- | | redux-form | 7.2.1 | redux | 4.0.5 | react-redux | 7.2.1 | react | 17.0.2 | react-dom | 17.0.2 | node | 14.17.3 | npm if using | 7.19.1 | yarn if using | | flow if using | | typescript if using | | Browser | Firefog | Operating System | Mac OS

    Steps to reproduce

    The form field:

                         <Field
                            name="isOffer"
                            component={renderRadio}
                            validate={[required]}
                            row
                        >
                            <Radio value="1" label={trans[LANG].offer} />
                            <Radio value="0" label={trans[LANG].request} />
                        </Field>
    

    The renderRadio component:

       export const renderRadio = (field) => {
          const {
             meta: { touched, error },
         } = field;
      return (
        <FormControl>
            <RadioGroup
                aria-label={field.input.name}
                name={field.input.name}
                row={field.row}
                {...field.input}
                {...field.rest}
            >
                {field.children.map((child) => (
                    <FormControlLabel
                        key={child.props.value}
                        value={child.props.value}
                        control={<Radio color="primary" />}
                        label={child.props.label}
                    />
                ))}
            </RadioGroup>
            <span className="form_error">{touched ? error : ''}</span>
        </FormControl>
       );
    };
    

    Expected behaviour

    Should trigger validation

    Actual behaviour

    No validation

    Other information

    I have checked a few of the issues here likethis one or this one, but they do not really address this.

    bug 
    opened by BernardA 0
  • Using connect from react-redux with reduxForm HOC throws an error

    Using connect from react-redux with reduxForm HOC throws an error

    Subject of the issue

    Using connect from react-redux with reduxForm HOC throws an error

    Your environment

    | Software | Version(s) | | --------------------- | ---------- | | redux-form | 8.3.8 | redux | 3.7.2 | react-redux | 7.2.4 | react | 16.14 | react-dom | 16.14

    Steps to reproduce

    Not sure why the component breaks when I use it like this

    export default reduxForm({
      validate
      enableReinitialize: true,
    })(connect(mapStateToProps, mapDispatchToProps)(Form));
    

    However, doing this does work, but the Form component does not get access to any of the mapStateToProps and mapDispatchToProps values

    export default connect(
      mapStateToProps,
      mapDispatchToProps,
    )(
      reduxForm({
        validate,
        enableReinitialize: true
      })(Form),
    );
    

    A reproducible demo: https://codesandbox.io/s/redux-form-simple-example-6hd1g?file=/index.js

    Expected behaviour

    The component should render without crashing the app

    Actual behaviour

    Here is the error that I get

    Screen Shot 2021-12-03 at 12 02 28 AM bug 
    opened by manan30 0
  • chore(deps): bump postcss from 7.0.27 to 7.0.39

    chore(deps): bump postcss from 7.0.27 to 7.0.39

    Bumps postcss from 7.0.27 to 7.0.39.

    Release notes

    Sourced from postcss's releases.

    7.0.39

    • Reduce package size.
    • Backport nanocolors to picocolors migration.

    7.0.38

    • Update Processor#version.

    7.0.37

    • Backport chalk to nanocolors migration.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by @​emzoumpo).

    7.0.30

    • Fix TypeScript definition (by @​nex3)

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by @​nex3).
    Changelog

    Sourced from postcss's changelog.

    7.0.39

    • Reduce package size.
    • Backport nanocolors to picocolors migration.

    7.0.38

    • Update Processor#version.

    7.0.37

    • Backport chalk to nanocolors migration.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by Emmanouil Zoumpoulakis).

    7.0.30

    • Fix TypeScript definition (by Natalie Weizenbaum).

    7.0.29

    • Update Processor#version.

    7.0.28

    • Fix TypeScript definition (by Natalie Weizenbaum).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump ua-parser-js from 0.7.21 to 0.7.31

    chore(deps): bump ua-parser-js from 0.7.21 to 0.7.31

    Bumps ua-parser-js from 0.7.21 to 0.7.31.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump browserslist from 4.11.1 to 4.18.1

    chore(deps): bump browserslist from 4.11.1 to 4.18.1

    Bumps browserslist from 4.11.1 to 4.18.1.

    Changelog

    Sourced from browserslist's changelog.

    4.18.1

    • Fixed case inventiveness for cover queries (by Pig Fang).
    • Fixed since 1970 query for null in release date (by Pig Fang).

    4.18

    • Added --ignore-unknown-versions CLI option (by Pig Fang).

    4.17.6

    • Fixed sharable config resolution (by Adaline Valentina Simonian).

    4.17.5

    • Fixed --update-db for some pnpm cases.

    4.17.4

    • Reduced package size.

    4.17.3

    • Use picocolors for color output in --update-db.

    4.17.2

    • Reduced package size.

    4.17.1

    • Use Nano Colors for color output in --update-db.

    4.17

    • Added yarn 3 support to --update-db (by Himank Pathak).

    4.16.8

    • Updated Firefox ESR.

    4.16.7

    • Fixed oudated caniuse-lite warning text (by Paul Verest).
    • Fixed docs (by Alexander Belov).

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).

    4.16.3

    • Fixed --update-db.

    4.16.2

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump color-string from 1.5.3 to 1.6.0

    chore(deps): bump color-string from 1.5.3 to 1.6.0

    Bumps color-string from 1.5.3 to 1.6.0.

    Release notes

    Sourced from color-string's releases.

    1.6.0

    Minor release 1.6.0

    • #55 - Add support for space-separated HSL

    Thanks @​htunnicliff for the contribution :)

    1.5.5 (Patch/Security Release) - hwb() ReDos patch (low-severity)

    Release notes copied verbatim from the commit message, which can be found here: 0789e21284c33d89ebc4ab4ca6f759b9375ac9d3

    Discovered by Yeting Li, c/o Colin Ife via Snyk.io.
    

    A ReDos (Regular Expression Denial of Service) vulnerability was responsibly disclosed to me via email by Colin on Mar 5 2021 regarding an exponential time complexity for linearly increasing input lengths for hwb() color strings.

    Strings reaching more than 5000 characters would see several milliseconds of processing time; strings reaching more than 50,000 characters began seeing 1500ms (1.5s) of processing time.

    The cause was due to a the regular expression that parses hwb() strings - specifically, the hue value - where the integer portion of the hue value used a 0-or-more quantifier shortly thereafter followed by a 1-or-more quantifier.

    This caused excessive backtracking and a cartesian scan, resulting in exponential time complexity given a linear increase in input length.

    Thank you Yeting Li and Colin Ife for bringing this to my attention in a secure, responsible and professional manner.

    A CVE will not be assigned for this vulnerability.

    1.5.4 (Patch Release)

    • Removes rounding of alpha values in RGBA hex (#rrggbbaa) and condensed-hex (#rgba) parsers, which caused certain unique inputs to result in identical outputs (see https://github.com/qix-/color/issues/174).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • chore(deps): bump path-parse from 1.0.6 to 1.0.7

    chore(deps): bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • redux-form/examples

    redux-form/examples

    Where is redux-form/examples?

    opened by Iago0815 2
  • chore(deps): bump tmpl from 1.0.4 to 1.0.5

    chore(deps): bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Malicious code on api documentation site

    Malicious code on api documentation site

    Clicking item in side navigation takes the user to unrelated site.

    This doesn't happen on the latest version of the docs, but it happens on 8.2.2.

    Skärmavbild 2021-08-23 kl  14 22 06 Skärmavbild 2021-08-23 kl  14 22 18
    opened by shagstrom 4
Releases(v8.3.8)
  • v8.3.8(Nov 17, 2021)

  • v8.3.7(Nov 17, 2020)

  • v8.3.6(May 29, 2020)

    • refactor(Fields): remove react legacy string refs 47ad2fdd
    • chore: replace 4 years old redux-immutablejs with redux-immutable 0c4a0477
    • chore: add env table to issue template 00b23ebb
    • revert: chore: remove flow-types from repo, install them on postinstall 1bba658c
    • chore: fix flow types for new added definitions ed62498c
    • chore: add scarf analytics 263474e1
    • chore: remove flow-types from repo, install them on postinstall e5a29178
    • chore: remove docs label from stale issues 674134ec
    • chore: upgrade flow-bin to 0.84, need for future migrations b1a6960c
    • chore: update eslint f6dc97d4
    • chore: remove unused lodash-es 08f0fa3b
    • chore: remove unused babel plugins and presets 1b89f1f6
    • chore: remove unused uglifyjs-webpack-plugin 366f9a2f
    • chore: npm update 1570032c
    • chore(flow): ignore build folders from static typing e5171b94
    • refactor(flow): fix flow untyped-type-import warnings 43167366

    https://github.com/redux-form/redux-form/compare/v8.3.5...v8.3.6

    Source code(tar.gz)
    Source code(zip)
  • v8.3.5(Apr 12, 2020)

    Fixes

    • fix: downgrade node back to initial 8.10, because yarn takes engines seriously 9c052079

    https://github.com/redux-form/redux-form/compare/v8.3.4...v8.3.5

    Source code(tar.gz)
    Source code(zip)
  • v8.3.4(Apr 12, 2020)

    Fixes

    • fix: downgrade node back to 8, because yarn takes engines seriously 04d2e930
    • fix: improve SubmissionError detection e705b7c1

    https://github.com/redux-form/redux-form/compare/v8.3.3...v8.3.4

    Source code(tar.gz)
    Source code(zip)
  • v8.3.3(Apr 9, 2020)

    Perf

    • perf: extract source maps from umd build into separate files 941327fe

    Misc

    • refactor: remove deprecated flow Existential Type * 9ec1b99a

    Chores

    • chore: update jest, run tests in parallel, add jest types 5c7ab6f0
    • chore: update minimum supported node version to [email protected] LTS fee51ec9
    • chore: remove jest-matcher-utils in favor of jest this.utils 94b01de7
    • chore: make node min supported version strict e651e2bd
    • chore: fix webpack config 34acd4b0
    • chore: enable all flow warnings, and disable all explicit 6d70e690
    • chore: update lodash flow types, prettier ignore flow-typed a99cb3f5
    • chore: npm audit fix 3f54b7a1

    https://github.com/redux-form/redux-form/compare/v8.3.2...v8.3.3

    Source code(tar.gz)
    Source code(zip)
  • v7.4.3(Apr 9, 2020)

  • v8.3.2(Apr 2, 2020)

    Perf ⏱

    • Improve actionTypes export to improve tree shaking #4637 ( @iamandrewluca )

    Misc 🚀

    • Fix flow immutable.js action creators #4632 ( @kwek )
    • Make immutable an optional dependency #4636 ( @esetnik )

    Documentation 📖

    • Remove CodeFund ad #4635 ( @andrewmcodes )
    Source code(tar.gz)
    Source code(zip)
  • v8.3.1(Mar 3, 2020)

    Fixes

    • fix: exclude immutable from handleSubmit and bundle e13c3b24

    Tests

    • add test case for multiple field validate 96221cd7

    Chores

    • chore: add emoji for lib communities accbae9f
    • chore: update issue templates 93db01a0
    • chore: upgrade husky precommit config a1c0b23e
    • chore: upgrade dependencies a0f4d8db
    • chore: remove unused dev dependencies 67c6eb61
    • chore: upgrade version in lock file 8814d24b

    https://github.com/redux-form/redux-form/compare/v8.3.0...v8.3.1

    Source code(tar.gz)
    Source code(zip)
  • v8.3.0(Feb 3, 2020)

    New Features 😻

    • Export ReduxFormContext #4446 (@jedwards1211)

    Fixes 🐛

    • Use initial values, if exists, when call clearField #4498 (@hugojanruiter)
    • Use on change return as prevent default only in RN #4596 (@timhwang21)

    Misc 🚀

    • Upgrade flow-bin #4526 (@iamandrewluca)
    • Add CODE_OF_CONDUCT #4545 (@iamandrewluca)
    • Remove .only from tests #4546 (@renatoagds)
    • Update dependencies from npm audit #4550 #4576 #4581 (@iamandrewluca)
    • Remove extra ref from createField (@iamandrewluca)

    Documentation 📖

    • Update change usage description #4528 (@milebza)
    • Fix label in MUI exampe #4558 (@goodwin64)
    • Update Selectors.md example for formValues #4586 (@samomar)
    • Fix computing derived data link at Selectors.md #4589 (@zjxiaohan)
    • Fix type at Field.md (@iamandrewluca)
    Source code(tar.gz)
    Source code(zip)
  • v8.2.6(Aug 13, 2019)

    Code Improvements

    • Improve Config type #4468
    • Rename lifecycles to UNSAFE_* #4510 #4520

    Bug Fixes

    • Allow change to handle undefined payload #3946 #4507

    Security Fixes

    Source code(tar.gz)
    Source code(zip)
  • v8.2.5(Jul 26, 2019)

    Bug Fixes

    • Fix actionCreators that was not being re-binded #4492
    • Fix _reduxForm context rewrite #4496 #4299
    • Fix warning not being calculated when using initialValues #4499 #4488
    Source code(tar.gz)
    Source code(zip)
  • v8.2.4(Jun 13, 2019)

  • v8.2.3(Jun 13, 2019)

  • v8.2.2(May 30, 2019)

    ⚠️ DON'T INSTALL THIS ⚠️

    This version has a problem, sorry for that

    Bug Fixes

    • ~Fix touched fields in Immutable #4471 #4313~
    • ~Avoid run tests with a different babel config. #4470~

    Typing Fixes

    • ~Fix component props type in FieldProps #4438 #4434~
    Source code(tar.gz)
    Source code(zip)
  • v8.2.1(May 24, 2019)

    This fix returns a bug in Immutable side of redux-form, if you use Immutable, please, stay in 8.2.0

    Bug Fixes

    • Reverts #4337 that causes a regression in FieldArray #4466 #4439 #4456 #4457
    Source code(tar.gz)
    Source code(zip)
  • v8.2.0(Apr 11, 2019)

    Features

    • Don't list and touch unregistered fields on submit #4383
    • Dispatch submit #4015

    Bug Fixes

    • Fixed deepEqual NaN -> 0 comparison #4416 #4378
    • Fixed touching all fields when using immutable #4337 #4313
    • Export clearSubmit action #4332

    Typing Fixes

    • FormProps export #4352 #3823
    • HandleSubmit type #4353 #4351
    • Smarter typing of FieldProps.type #4361
    • Fixed FieldInputProps.component redundant definition #4377 #3878
    Source code(tar.gz)
    Source code(zip)
  • v5.4.0(Mar 22, 2019)

    Bug Fixes

    • getValue not return object when one of keys is "value" #3382
    • update hoist-non-react-statics version #3556
    • Allow redux 4 #4003
    • better detection of when mapToProps funcs depend on props #4404

    New Features

    • remove array field by predicate function #3739
    Source code(tar.gz)
    Source code(zip)
  • v8.1.0(Dec 24, 2018)

    Bug Fixes

    • Fix HOC displayName issue #4320
    • Convert immutable list to array #4314 #4313
    • Add @babel/plugin-transform-runtime #4324 #4329
    • Fix imports and exports in es-build #4343 #4330
    • Fix how isSubmissionError works for Babel 7 change #4331 #4302

    New Features

    • Add way to cancel dispatching events for React Native #4309
    • Fields validation #4301
    • Add config for plugins receiving actions from all forms #4311 #4310
    Source code(tar.gz)
    Source code(zip)
  • v8.0.4(Dec 12, 2018)

    Build Fixes

    • Fixed some problems in the way that v8.0.1 was published to NPM

    Examples Fixes

    • Changed examples to use UMD packages for react, redux, and redux-form, which should significantly speed them up.
    Source code(tar.gz)
    Source code(zip)
  • v8.0.1(Dec 11, 2018)

  • v8.0.0(Dec 11, 2018)

    ⚠️ Breaking Changes ⚠️

    • Upgraded to new React Context API #4289 #4216
    • You will need to change all your withRef props to forwardRef.

    You will now need to use [email protected] and [email protected]

    New Features

    • Also pass sectionPrefix from FormName #4119
    • Add name parameter to field level validation #4133
    • Upgrades performance of FieldArray with immutable data #4138

    Bug Fixes

    • Fix handleSubmit with redux-form/immutable #4095 #4094
    • Export updateSyncErrors #4098 #4040
    • Validate component props with isValidElementType() #4103 #4041
    • Replaced startsWith with regex to fix IE11 #4128 #4126
    • Remove dependency from Immutable #4156 #4095
    • Function supported for change-action #4174
    • Field props onChange accepts event or value, but onChange callback only accepts events (not plain values) #3446
    • Fix form reinitialize problem: using previous initialValues #4020

    Typing

    • Fix FormProps#asyncValidating type #4097
    • Export Event type #4261
    Source code(tar.gz)
    Source code(zip)
  • v7.4.2(Jun 15, 2018)

    Bug Fixes

    • Rolled back UNSAFE_ silliness from v7.4.0. Compatibility with React 15 has actually been restored. #4079 #4078 #4069 #4070 #4072
    Source code(tar.gz)
    Source code(zip)
  • v7.4.1(Jun 15, 2018)

  • v7.4.0(Jun 12, 2018)

    New Features

    • Added an optional list of fields to isDirty and isPristine selectors #3900 #3864
    • Add immutableProps option to Field component #3849 #3810
    • New isAsyncValidating selector #3910 #3901
    • New FormName component that will call a child render prop with the name of the form it is inside. #4038 #4037

    Bug Fixes

    • Fix field not validating after re-mount #3909 #3566 #3500
    • Add immutableProps to HOC propTypes #3913
    • Don't delete initial initialValues structure on withCleanUp #3619 #4068 #2597 #3366
    • Add PropTypes.node to FormSection's component propTypes #3995 #3859
    • Use cached object for syncErrors and syncWarnings #4010
    • Fixed bug where async validation with a resolved Promise was halting form submission #4028 #3895 #2056
    • Fix clear errors in parent of array after child change #4014 #3580

    Type Fixes

    • Made optional arguments initialize to optional in Flow #3898 #3668

    Dependency Fixes

    • 🎉 Support for Redux v4 #3986 🎉
    Source code(tar.gz)
    Source code(zip)
  • v7.3.0(Mar 2, 2018)

    New Features

    • Added resetSection action #3766 #2239
    • Added keepValues to initialize #3817 #3649

    Bug Fixes

    • Add clearFields and clearSubmitErrors to propTypes #3874
    • Fix error in multiple async validation #3787
    • Reverted "Log onSubmitSuccess thrown errors (#3723)" #3825 Read why: #3821 #3801
    • Use shouldError/shouldWarn by default unless only shouldValidate is passed in. #3881
    • Fixed bug submitSucceeded is set on redux-form/STOP_SUBMIT #3830 #2260

    Flow Fixes

    • Update FlowType Definitions to include clearFields #3820

    Build Fixes

    • Add the Webpack 4 sideEffects flag #3870
    Source code(tar.gz)
    Source code(zip)
  • v7.2.3(Feb 2, 2018)

  • v7.2.2(Feb 1, 2018)

    Bug Fixes

    • Fixed issue with Immutable field arrays with more than 32 items. #3803 #3791
    • Fix for double INITIALIZE happening on first mount. #3797 #3690 #3706
    • Fix for formValues not reacting to props change #3794 #3793
    • Reverted accidental breaking change in v7.2.1 #3807 #3755
    Source code(tar.gz)
    Source code(zip)
  • v7.2.1(Jan 18, 2018)

    Bug Fixes

    • Fix asyncValidate when asyncBlur/ChangeFields are provided #3647 #3645
    • Fix Immutable FieldArrays #3692 #3489
    • Fix field-level validation on previously emptied FieldArray #3697
    • Export clearAsyncError #3709 #3708
    • Ensure errors thrown from submit handler are not silenced #3744 #3303
    • Fix submit crashing when asyncBlurFields or asyncChangeFields are given #3733 #3658
    • Fix validation after duplicate field unmount #3756 #3688
    • Fix fields re-rendering every time due to regression introduced with flow typings #3758
    • Better errors thrown from onSubmitSuccess #3723 #3636
    • Fix async/submit errors getter for nested fields #3755
    Source code(tar.gz)
    Source code(zip)
  • v7.2.0(Nov 27, 2017)

    Features

    • New clearFields() action that lets you reset a subset of your form. #3576 #3055 #2224 #3626

    Bug Fixes

    • Fixed hot reloading problem with React 16. #3615 #3435
    • Export updateSyncWarnings() action. #3631

    Flow Fixes

    • Fixed selector types. #3634 #3099
    Source code(tar.gz)
    Source code(zip)
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 10 Aug 23, 2021
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Jan 15, 2022
React with Redux, action, dispatch, reducer, store setup and guide

This Project has Snippets for react with redux steup, process and how to implemenntation details src->components->HomeButtons has old approach src->co

Mohib Khan 1 Nov 22, 2021
A mock store for testing Redux async action creators and middleware.

redux-mock-store A mock store for testing Redux async action creators and middleware. The mock store will create an array of dispatched actions which

Redux 2.4k Jan 18, 2022
persist and rehydrate a redux store

Redux Persist Persist and rehydrate a redux store. v6 upgrade Web: no breaking changes React Native: Users must now explicitly pass their storage engi

Zack Story 11.8k Jan 21, 2022
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Dec 16, 2021
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

Márcio Júnior 3 Jan 5, 2022
Dead simple state management for React

Undux & TypeScript TodoMVC Example TodoMVC for Undux Installation git clone [email protected]:bcherny/undux-todomvc.git cd undux-todomvc npm install npm

Boris Cherny 11 Aug 10, 2020
Manage the state of your React app with ease

@spyna/react-store React app state management that uses a storage Demo https://spyna.github.io/react-store/ Install npm install --save @spyna/react-st

Lorenzo Spinelli 46 Jan 19, 2021
A light-weight state manager.

Rectx a light-weight state manager with mutable api. 安装 npm install --save rectx 又一个轮子? Redux 和 Mobx 都非常的棒,但对于大部分项目都只是 CRUD 的项目来说,这些个玩意儿都略显太重了。而且对于 re

ZhengFang 177 Nov 12, 2021
Create the next immutable state by mutating the current one

Immer Create the next immutable state tree by simply modifying the current tree Winner of the "Breakthrough of the year" React open source award and "

immer 21.9k Jan 12, 2022
A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. ?? Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

João Marcos Belanga 1 Jan 5, 2022
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

Redux 298 Dec 18, 2021
Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.

Crypto Tracker A single page application meant to keep track of the most popular crypto currencies status. The user can sort the coins by highest gain

Robert Baiesita 16 Oct 24, 2021
Shop Cart Page Built Using React And Redux

Getting Started with react-redux-jest-shop Shop cart page with use: React,redux,redux-thunk, API,JEST, LTR Steps for run git clone or download react-r

Renat Khakimoff 1 Dec 16, 2021
Watchlist Movie App Using React Hooks With Redux

MovieRedux Watchlist Movie App Using React Hooks With Redux Technology Stack: Re

Said Mounaim 0 Sep 30, 2021
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

redux-observable 7.8k Jan 18, 2022
Redux Implementation using ReactJS and JSON placeholder API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Siddheshwar Panda 1 Oct 26, 2021
Toolkit for implementing clean architecture using Redux

?? Toolkit for implementing clean architecture using Redux ?? ?? Focuses on achi

Joseph Garrone 22 Jan 13, 2022