How to handle redux-form/CHANGE in reducer

Question

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.

Answer 1

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)
});