Redux中store.getState返回undefined问题求助

Hey there! Let's figure out why your store.getState() is giving you undefined and that console message "Update salary: – undefined" is popping up. As a newbie to React and Redux, this is a super common snag—we'll work through it step by step.

Here are the most likely culprits and how to fix them:

1. Your reducer isn't returning an initial state #

Redux relies on reducers to set up the initial state of your store. If your reducer doesn't define an initial state or forgets to return it in the default case, your store will start with undefined.

Wrong example: #

// Reducer without initial state or default return
const salaryReducer = (state, action) => {
  switch(action.type) {
    case 'UPDATE_SALARY':
      return { salary: action.payload };
    // No default case to return initial state
  }
}

// Store created without proper reducer setup
const store = createStore(salaryReducer);

Correct fix: #

// Define your initial state first
const initialState = { salary: 0 };

const salaryReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'UPDATE_SALARY':
      // Always spread the existing state to avoid overwriting other properties
      return { ...state, salary: action.payload };
    // Critical: Return the current state for unrecognized actions
    default:
      return state;
  }
}

// Create store with the properly set up reducer
const store = createStore(salaryReducer);

2. You're accessing the store before it's initialized #

If you call store.getState() before the store has been created (like in a component that loads before your store setup), you'll get undefined. Make sure your store is initialized at the root of your app—usually in index.js—so it's ready when components need it.

For example, initialize your store first, then wrap your app with the Redux Provider:

import { Provider } from 'react-redux';

const store = createStore(salaryReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

3. You're accessing the wrong state path #

If you used combineReducers to merge multiple reducers, your store.getState() returns an object where each key matches the name you gave to your reducer. You need to access the correct key to get your salary state.

Example with combined reducers: #

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  salary: salaryReducer // Here, "salary" is the key for our reducer's state
});

const store = createStore(rootReducer);

// To get the salary value, you need to access the "salary" key
const currentSalary = store.getState().salary.salary;
// Or if your reducer's state is just the number:
// const currentSalary = store.getState().salary;

If you try to access store.getState().someWrongKey, you'll get undefined—double-check your reducer naming!

4. Your dispatched action has an undefined payload #

If you're dispatching an action without a payload, or the payload itself is undefined, your reducer will update the state with undefined.

Wrong example: #

// Missing payload in the action
dispatch({ type: 'UPDATE_SALARY' });

Correct fix: #

// Make sure to include a valid payload
dispatch({ type: 'UPDATE_SALARY', payload: 65000 });

Quick Debug Tip #

Add a console.log in your reducer to see what state and action are being passed:

const salaryReducer = (state = initialState, action) => {
  console.log('Current state:', state);
  console.log('Received action:', action);
  switch(action.type) {
    // ... your cases
  }
}

This will help you trace exactly where the undefined is coming from.

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