已向Dispatcher传递Event，但Reducer仍显示Undefined问题排查

Hey there, let’s break down why your Redux reducer is returning undefined even after you’ve dispatched an event. Based on the component snippet you shared, here are the most common issues to check and fix:

1. Ensure Your Action Creator Returns a Valid Action Object #

Redux requires every action to have a type property—this is non-negotiable. If your action creator is missing this, or returns something invalid (like undefined), your reducer won’t know how to handle it.

Example of a valid action creator:

// Correct action creator structure
const updateGeneralInfo = (formData) => {
  return {
    type: 'UPDATE_GENERAL_INFO', // Required field
    payload: formData // Your data to pass to the reducer
  };
};

If you’re using async actions (like with Redux Thunk), double-check that you’ve configured the middleware correctly in your store setup.

2. Set an Initial State for Your Reducer #

Redux calls your reducer once on initialization with undefined as the state. If you don’t provide a default initial state, your reducer will start with undefined and stay that way unless you explicitly set it.

Fix your reducer like this:

// Your dedicated GeneralInfo reducer
const generalInfoReducer = (state = {}, action) => { // Assign initial state (empty object here, adjust to your needs)
  switch (action.type) {
    case 'UPDATE_GENERAL_INFO':
      return { ...state, ...action.payload }; // Merge new data into state
    default:
      return state; // Critical! Always return current state for unrecognized actions
  }
};

Don’t skip the default case—if you do, any action that doesn’t match your case will cause the reducer to return undefined.

3. Verify Your Reducer is Properly Mounted in the Store #

If your dedicated reducer isn’t merged into the root reducer, the actions you dispatch will never reach it. Use combineReducers to mount it correctly:

import { combineReducers, createStore } from 'redux';
import generalInfoReducer from './path-to-your-reducer';

// Root reducer that combines all your app's reducers
const rootReducer = combineReducers({
  generalInfo: generalInfoReducer // Mount your reducer under a key (e.g., `generalInfo`)
});

// Create the store with the root reducer
const store = createStore(rootReducer);

4. Check That Dispatch is Properly Connected to Your Component #

Make sure you’re mapping dispatch to your component’s props correctly using connect. If you skip this step, this.props.dispatch won’t be available, or your action won’t be dispatched properly.

Example of correct connect setup:

// At the bottom of your GeneralInfo component file
import { updateGeneralInfo } from './path-to-your-actions';

const mapStateToProps = (state) => {
  return {
    generalInfo: state.generalInfo // Pull state from the mounted reducer key
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    onUpdateInfo: (data) => dispatch(updateGeneralInfo(data)) // Map action to a prop
  };
};

// Connect both state and dispatch to your component
export default connect(mapStateToProps, mapDispatchToProps)(GeneralInfo);

If you prefer using this.props.dispatch directly, you can pass null as the second argument to connect, but mapping actions to props is cleaner.

5. Confirm Action Type Spelling & Case Match Exactly #

Redux action types are case-sensitive. A typo like 'update_general_info' vs 'UPDATE_GENERAL_INFO' will cause your reducer to hit the default case instead of processing the action. Double-check that the type in your action matches the case in your reducer perfectly.

Quick Debug Tip #

Use Redux DevTools to inspect the actions you’re dispatching—you’ll be able to see if the action has a valid type and payload, and track how your reducer’s state changes (or doesn’t change) in real time.

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