Redux：从切片减速器动作调用 thunk 动作

问题描述

我有一个树结构，可以按需加载子项，这是我的减速器。我遇到的问题是，当我想从 toggleExpandedProp 调用我的 thunk 操作时，出现异常（见下文）。我该怎么办？

import { createSlice,createAsyncThunk } from '@reduxjs/toolkit';
import { useDispatch } from 'react-redux';
import axios from 'axios';

const dispatch = useDispatch()

export const getRoot = createAsyncThunk('data/nodes/getRoot',async () => {
    const response = await axios.get('http://localhost:5000/api/nodes/root');
    const data = await response.data;
    return data;
});

export const getChildren = createAsyncThunk('data/nodes/getRoot',async params => {
    const response = await axios.get('http://localhost:5000/api/nodes/' + params.id + '/children');
    const data = await response.data;
    return data;
});

const initialState = {
    data: [],loading: 'idle'
};

// Then,handle actions in your reducers:
const nodesSlice = createSlice({
    name: 'nodes',initialState,reducers: {
        toggleExpandedProp: (state,action) => {
            state.data.forEach(element => {
                if(element.id === action.payload.id) {
                    element.expanded = !element.expanded;
                    dispatch(getChildren(element));
                }
            });
        }
    },extraReducers: {
      // Add reducers for additional action types here,and handle loading state as needed
      [getRoot.fulfilled]: (state,action) => {
        state.data = action.payload;
      },[getChildren.fulfilled]: (state,action) => {
        state.data.push(action.payload);
      }
    }
  })

export const { toggleExpandedProp } = nodesSlice.actions;

export default nodesSlice.reducer;

发生异常。 错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了钩子规则
3. 您可能在同一个应用中拥有多个 React 副本 有关如何调试和解决此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）