davidkpiano / react-redux-form

Create forms easily in React with Redux.
https://davidkpiano.github.io/react-redux-form
MIT License
2.06k stars 252 forks source link

Using existing reducers unclear #1012

Open daronjay opened 6 years ago

daronjay commented 6 years ago

I am trying to add react-redux-forms into an existing implementation. I want to be able to use a custom reducer for my form that has access to the model data. I see in the documentation you suggest this approach, replacing CombineReducer with CombineForms

import myCustomReducer from './myCustomReducer.js';

const store = createStore(combineForms({
  user: initialUser,
  goat: initialGoat,
  custom: myCustomReducer, // <= will be modeled()
}));

My trouble is I have an existing setup like this:

import allOtherAppReducers from './allOtherAppReducers.js'

const store = createStore(
    combineReducers({
      ...allOtherAppReducers,
      apollo: apolloClient.reducer(),
      ...createForms({
        formData: {}
      })
    }),
    {},
    composeEnhancers(applyMiddleware(...middlewares))
  );

If it use createForms like that, then the formData gets updated and persisted automatically, but I can't get at it with my reducers.

If I set it up like this:

import allOtherAppReducers from './allTheOtherAppReducers.js'
import myCustomFormDataReducer from './myCustomFormDataReducer.js'

const store = createStore(
    combineForms({
      ...allOtherAppReducers,
      apollo: apolloClient.reducer(),
      formData: myCustomReducer
      })
    }),
    {},
    composeEnhancers(applyMiddleware(...middlewares))
  );

then everything in the entire application gets "modelled". How should I go about this?

daronjay commented 6 years ago

I seem to have got it going using this syntax:


import allOtherAppReducers from './allTheOtherAppReducers.js'
import myCustomFormDataReducer from './myCustomFormDataReducer.js'

  const store = createStore(
    combineReducers({
      ...allOtherAppReducers,
      apollo: apolloClient.reducer(),
      ...createForms({
        formData: myCustomFormDataReducer
      })
    }),
    {},
    composeEnhancers(applyMiddleware(...middlewares))
  );

It's not clear to me from the documentation that you can do the same sort of injection of a custom reducer in createForms as you can in combineForms. I wonder if the documentation needs an update, (assuming I actually have it right)

partisanyc commented 6 years ago

I also struggled with this. The documentation does state that you can use a custom reducer, but it doesn't tell you why you would or what the effect of doing that would be. I'm new to react, redux, and forms so I just chalked it up to lack of experience, but I am glad to hear I am not the only one who has faced the issue.