使用createSlice()时出现Dispatch is not a function报错如何解决

数据老陈

2026-10-7

问题根因

你定义的getCustomer是Redux Thunk异步action生成器，调用后返回的是接收dispatch作为入参的函数，本身不会自动注入Redux的dispatch实例，你直接调用getCustomerSlice()没有传入dispatch参数，自然就会触发Dispatch is not a function报错。
同时你当前的用法不符合Redux的数据流规范：没有从Redux store读取数据，反而用本地useState重复存储冗余数据，也没有正确配置Redux的Provider和store。

修复步骤

1. 配置Redux Store

新增src/store.js文件：

import { configureStore } from '@reduxjs/toolkit';
import { reducer as customerReducer } from './slices/customers';

export const store = configureStore({
  reducer: {
    customers: customerReducer
  }
});

修改项目入口文件（通常为src/index.js），用Redux Provider包裹根组件，全局注入store：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

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

2. 调整App.js代码

import React, { useCallback, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getCustomer as getCustomerSlice } from './slices/customers';

export default function App() {
  // 获取Redux的dispatch方法
  const dispatch = useDispatch();
  // 从Redux store中读取已存储的customer数据
  const customer = useSelector(state => state.customers.customer);

  const getCustomer = useCallback(async () => {
    try {
      // 用dispatch触发异步thunk action
      await dispatch(getCustomerSlice());
    } catch (err) {
      console.error(err);
    }
  }, [dispatch]);

  useEffect(() => {
    getCustomer();
  }, [getCustomer]);

  // 渲染customer数据即可
  return <div>{JSON.stringify(customer)}</div>;
}