Redux Toolkit报错Minified Redux error #7：dispatch Axios响应数据失败求助

问题描述 #

我在使用Redux Toolkit的configureStore时，尝试dispatch Axios响应返回的对象数组数据，却持续出现Minified Redux error #7错误。怀疑该错误与thunk中间件有关，请问是否需要额外添加thunk中间件？

报错信息 #

相关代码 #

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

import { configureStore } from '@reduxjs/toolkit';
import App from './App';
import './index.css'

// slices
import Register from './features/registerSlice'
import loginSlice from './features/loginSlice';
import ForgotSlice from './features/forgot';
import handlePage from './features/heroPage';
import NewTask from './features/newTaskSlice';
import taskList from './features/taskList';

export const store = configureStore({
  reducer: {
    Register: Register,
    Login: loginSlice,
    Forgot: ForgotSlice,
    handlePage: handlePage,
    NewTask: NewTask,
    TaskList: taskList
  },
  
  middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware({
    serializableCheck: false,
    thunk: true
  }),
})

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

PrivateHome组件（错误出现在第34行dispatch处） #

import React, { useState } from 'react'
import { AnimatePresence } from 'framer-motion'
import { useNavigate } from 'react-router-dom'
import Axios from 'axios'

// COMPONENTS
import Loader from './loader/Loader'
import Hero from './main/hero'
import { useDispatch } from 'react-redux'
import { setList, setFinished } from '../features/taskList'

export const PrivateHome = () => {
    Axios.defaults.withCredentials = true

    const dispatch = useDispatch()
    const navigate = useNavigate()

    const [loggedIn, setLog] = useState(false)
    const [finished, setFinished] = useState(0)
    const [active, setActive] = useState(0)

    Axios.get(`${process.env.REACT_APP_BASEURL}/login`).then((response) => {
        console.log("TEST LOGIN")
        console.log(response)
        if (response.data?.loggedIn) {

            Axios.get(`${process.env.REACT_APP_BASEURL}/tasks`).then((response) => {
                const data = response.data?.userData
                setActive(data?.activeTask?.length)
                setFinished(data?.finishedTask?.length)
          
                // PUT LIST OF DATA INTO REDUX STATE
                dispatch(setList({ value: data?.activeTask })) // ERROR HERE
                dispatch(setFinished({ value: data?.finishedTask })) // ERROR HERE

                console.log(data)

                setLog(true)

              })

        } else {
            setLog(false)

            navigate("/", { replace: true })

        }
    })

    if (!loggedIn) {
        return (
            <AnimatePresence>
                <Loader/>
            </AnimatePresence>
        )
    }

    return (
        <Hero finished={finished} active={active}/>
    )
}

问题解答 #

1. 是否需要额外添加thunk中间件？ #

不需要。Redux Toolkit的configureStore默认已经集成了thunk中间件，你的配置里thunk: true不仅多余，还不符合配置规范（正确的thunk配置应为对象形式，比如配置extraArgument）。

2. 错误#7的排查与修复 #

Minified Redux error #7核心是状态更新逻辑冲突，和thunk是否添加无关，主要由以下问题导致：

（1）组件异步逻辑执行时机错误

你在PrivateHome组件的函数顶层直接调用Axios请求，会导致组件每次渲染都重复发起请求、dispatch action，触发无限渲染循环，进而引发Redux状态更新冲突。需将逻辑移入useEffect钩子，确保仅在组件挂载时执行一次：

import React, { useState, useEffect } from 'react'
// ...其他导入

export const PrivateHome = () => {
    Axios.defaults.withCredentials = true

    const dispatch = useDispatch()
    const navigate = useNavigate()

    const [loggedIn, setLog] = useState(false)
    const [finished, setFinished] = useState(0)
    const [active, setActive] = useState(0)

    useEffect(() => {
        const fetchData = async () => {
            try {
                const loginRes = await Axios.get(`${process.env.REACT_APP_BASEURL}/login`)
                if (loginRes.data?.loggedIn) {
                    const taskRes = await Axios.get(`${process.env.REACT_APP_BASEURL}/tasks`)
                    const data = taskRes.data?.userData
                    setActive(data?.activeTask?.length)
                    setFinished(data?.finishedTask?.length)
          
                    dispatch(setList({ value: data?.activeTask }))
                    dispatch(setFinished({ value: data?.finishedTask }))
                    setLog(true)
                } else {
                    setLog(false)
                    navigate("/", { replace: true })
                }
            } catch (err) {
                console.error(err)
                setLog(false)
                navigate("/", { replace: true })
            }
        }
        fetchData()
    }, [dispatch, navigate])

    // ...剩余组件代码
}

（2）修正无效的thunk配置

移除configureStore中错误的thunk: true配置，修正后的store代码：

export const store = configureStore({
  reducer: {
    Register: Register,
    Login: loginSlice,
    Forgot: ForgotSlice,
    handlePage: handlePage,
    NewTask: NewTask,
    TaskList: taskList
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false
      // 如需配置thunk，可改为对象形式：thunk: { extraArgument: 自定义参数 }
    }),
})

（3）检查slice reducer定义

确保taskList slice中的setList、setFinished是纯函数，正确处理state更新（借助Immer可直接修改state）：

// 示例正确的taskList slice写法
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
    activeTask: [],
    finishedTask: []
}

const taskListSlice = createSlice({
    name: 'taskList',
    initialState,
    reducers: {
        setList: (state, action) => {
            state.activeTask = action.payload.value
        },
        setFinished: (state, action) => {
            state.finishedTask = action.payload.value
        }
    }
})

export const { setList, setFinished } = taskListSlice.actions
export default taskListSlice.reducer

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