Search code examples
redux-form

How to handle redux-form/CHANGE in reducer


What is the recommended way to handle redux-form/CHANGE actions being dispatched by redux-form? I have my own reducer managing the state of this form but I'm not sure if it's best to do the following:

export default reducer (state = initialState, action) {
  case 'redux-form/CHANGE':
    // return modified state
}

One problem I see is that this reducer would receive every redux-form/CHANGE action. Additionally as far as I can tell ActionTypes.js isn't exported in a way for me to import it so I feel as though this may not be best practice.


Solution

  • You can definitely use redux-form action creators. You just have to connect it to your component.

    So in your /components/MyComponent.js

    import React from 'react';
    import { connect } from 'react-redux';
    import { change } from 'redux-form';
    
    class MyComponent extends React.Component {
        ...
        render() {
            return <div>
                <button onClick={this.props.change('formName', 'fieldName', 'value')}>Change</button>
            </div>
        }
    }
    
    const mapStateToProps = (state, ownProps) => { ... }
    export default connect(mapStateToProps, { change })(MyComponent);
    

    You could also use redux-form reducer and extends it to your needs...

    In your reducers/index.js]

    import { reducer as form } from 'redux-form';
    
    const formPlugin = {
        formName: (state, action) => {
            ...reducer logic
            return newState;
        }
    }
    
    const rootReducer = combineReducers({
        ...other reducers,
        form: form.plugin(formPlugin)
    });