Integrate redux-form in current ongoing project

Question

I don't know how to integrate redux-form into the current project I am working for.

Exactly I don't know ho to integrate redux-form reducer in the already given function reducer that the project provides me. This function returns currently 2 keys: {name, model} which are important for the app and can not be removed.

Some of you guys do know how I should proceed?

here my files: (I shorted them for the sake of brevity)

myGivenReducer.js

const modelReducer = (model = {}, action = {}) => {
    switch (action.type) {
      //blah blah...
    }
}

export default function reducer(state = {}, action = {}) {
    const checkoutModel = modelReducer(state.model, action);
    return {
        name: state.name || 'unnamed',
        model: checkoutModel
    };
}

myStoreCreator.js

let data = {name, model: props};

let storeEnhancer = (process.env.NODE_ENV === 'local') ? DevTools.instrument : (() => (next) => next);

store = compose(storeEnhancer())(createStore)(myReducer, data);

contactForm.js

// exactly like redux-form tutorial sample code 
http://redux-form.com/6.5.0/docs/GettingStarted.md/

hints:

I already tried to add a new key {form: reduxForm} in reducer function, and it does not work.

If I use combine reducer (below) the form works!, but the keys {'name','model'} are not longer passed through the app. So it is not a valid solution.

const combinedReducer = combineReducers({
    form: formReducer,
    model: myReducer()['model'],
    name: myReducer()['name']
})

Hopefully some of you can send me some ideas! (Indeed, I think it is more about Javascript that from redux-form itself..)

Cheers.

Answer 1

Try...

// dont forget to import the redux-form reducer
import { reducer as formReducer } from 'redux-form';

export default function reducer(state = {}, action = {}) {
  const checkoutModel = modelReducer(state.model, action);
  return {
    name: state.name || 'unnamed',
    model: checkoutModel,
    form: formReducer(state.form, action)
  };
}