React Redux报错Uncaught TypeError: Cannot read 'getState' of undefined求助

你的错误根源在于store导出错误、slice文件写法完全错误，以及组件中dispatch调用方式不当，以下是具体修复步骤：

1. 修复store.js文件 #

你当前导出的是store.reducer，但React Redux的Provider需要接收完整的store实例（包含getState、dispatch等方法），而非单独的reducer函数。

修改后的store.js：

import { configureStore } from "@reduxjs/toolkit";
import pizzaReducer from './pizzaSlice';

const store = configureStore({
  reducer: {
    pizza: pizzaReducer,
  }
})

// 导出完整的store实例，而非reducer
export default store;

2. 重写pizzaSlice.js文件 #

你的pizzaSlice.js完全写错了——它应该用createSlice创建状态切片，而非重复调用configureStore，同时存在循环导入问题。

修改后的pizzaSlice.js：

import { createSlice } from "@reduxjs/toolkit";

// 定义披萨状态的初始值
const initialState = {
  toppings: [],
  isGlutenFree: false
};

const pizzaSlice = createSlice({
  name: 'pizza',
  initialState,
  reducers: {
    addTopping: (state, action) => {
      // Redux Toolkit内置immer，允许直接修改状态
      state.toppings.push(action.payload);
    },
    toggleGluten: (state) => {
      state.isGlutenFree = !state.isGlutenFree;
    }
  }
});

// 导出action creators供组件调用
export const { addTopping, toggleGluten } = pizzaSlice.actions;

// 导出reducer给store配置使用
export default pizzaSlice.reducer;

3. 修复App.js中的按钮点击逻辑 #

你当前直接在onClick中调用dispatch(addTopping('ham'))，会导致组件渲染时就立即执行dispatch，而非点击按钮时执行，需要用箭头函数包裹。

修改后的App.js：

import { useDispatch, useSelector } from 'react-redux';
import { addTopping, toggleGluten } from './pizzaSlice';
import './App.css';

function App() {
  const pizza = useSelector(state => state.pizza);    
  const dispatch = useDispatch();

  return (
    <div className="App">
        <h1>Pizza</h1>
          {
           pizza.toppings.map(topping => (
             <div key={topping}>{topping}</div> 
           ))
         }
         {/* 用箭头函数包裹dispatch，确保仅点击时触发 */}
         <button onClick={() => dispatch(addTopping('ham'))}> Add Ham </button>
         <button onClick={() => dispatch(addTopping('mushroom'))}> Add Mushroom </button>
         <button onClick={() => dispatch(addTopping('pepperoni'))}> Add Pepperoni </button>
         <button onClick={() => dispatch(toggleGluten())}> Toggle Gluten </button>
    </div>
  );
}

export default App;

修复说明 #

• 修复store导出后，Provider能拿到包含完整方法的store实例，彻底解决"Cannot read properties of undefined (reading 'getState')"错误。
• 重写slice文件后，正确定义了状态结构和修改逻辑，避免了循环导入和无效的store创建。
• 按钮点击逻辑的修复，确保dispatch仅在用户交互时触发，避免不必要的状态更新。

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