在Next.js中整合Redux Form与自定义Reducer遇阻求助

Hey there, let's tackle this Redux Form + Next.js issue you're facing. That error usually pops up when Redux Form can't find its required state slice in your Redux store—meaning your form reducer isn't properly integrated. Let's walk through the fix step by step, building on the Next.js with-redux-wrapper example you referenced.

1. Correct Your store.js Configuration #

First, let's make sure your store is set up to include both Redux Form's reducer and your custom reducer properly. Here's the full, working version of store.js:

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { reducer as formReducer } from 'redux-form';
// Import your custom reducer(s) here
import yourCustomReducer from './path-to-your-custom-reducer';

// Handle Redux DevTools compatibility (optional but helpful)
const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose;

// Combine reducers: Critical to mount Redux Form's reducer under the `form` key
const rootReducer = combineReducers({
  // Redux Form REQUIRES this key to be named `form` (unless you explicitly configure it otherwise)
  form: formReducer,
  // Add your custom reducer(s) here
  customState: yourCustomReducer
});

// Create the store factory function required by next-redux-wrapper
export const makeStore = () => {
  return createStore(
    rootReducer,
    composeEnhancers(
      applyMiddleware()
      // Add any middleware you need here (e.g., redux-thunk, redux-saga)
      // applyMiddleware(thunk)
    )
  );
};

// Export the wrapper from next-redux-wrapper (make sure you've installed it!)
import { createWrapper } from 'next-redux-wrapper';
export const wrapper = createWrapper(makeStore);

Key Notes Here: #

• Never skip mounting the form reducer under form: Redux Form's internal selectors look for state.form by default. If you name this key anything else, you'll have to manually specify it in every form component, which is error-prone. This is almost certainly the root cause of your "source of undefined" error.
• The makeStore function is required by next-redux-wrapper to create a fresh store instance on both server and client, preventing cross-request state leaks.

2. Wrap Your Pages/App with the Redux Wrapper #

Next, ensure your pages (and custom App component, if you have one) are wrapped with the Redux wrapper to connect them to the store.

Example Page Component: #

import { wrapper } from '../store';
import { reduxForm, Field } from 'redux-form';

// Your form component
const MyForm = ({ handleSubmit }) => (
  <form onSubmit={handleSubmit((values) => console.log(values))}>
    <Field name="email" component="input" type="email" placeholder="Email" />
    <Field name="password" component="input" type="password" placeholder="Password" />
    <button type="submit">Submit</button>
  </form>
);

// Wrap the form with reduxForm HOC
const WrappedForm = reduxForm({ form: 'loginForm' })(MyForm);

// Wrap the page with the Redux wrapper
const LoginPage = () => <WrappedForm />;

export default wrapper.withRedux(LoginPage);

Custom App Component (if you use one): #

import { wrapper } from '../store';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default wrapper.withRedux(MyApp);

3. Verify Your Store State #

After setting this up, open Redux DevTools (if you have it enabled) and check that your store state includes a form key. If it does, Redux Form will be able to access its state correctly, and that "source of undefined" error should disappear.

Quick Troubleshooting Checklist #

• Did you install all required dependencies? Make sure you have redux, react-redux, redux-form, and next-redux-wrapper installed.
• Double-check that rootReducer includes form: formReducer—typos here are easy to miss!
• Ensure every page using Redux Form is wrapped with wrapper.withRedux().

内容的提问来源于stack exchange，提问作者Neone