如何解决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;
发生异常。 错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的:
- 您的 React 和渲染器版本可能不匹配(例如 React DOM)
- 你可能违反了钩子规则
- 您可能在同一个应用中拥有多个 React 副本 有关如何调试和解决此问题的提示,请参阅 https://reactjs.org/link/invalid-hook-call。
解决方法
const dispatch = useDispatch()
您只能在函数组件内部或另一个钩子内部使用 useDispatch
。您不能像这样在文件的顶层使用它。
您不应该从减速器内部调用 dispatch
。但是可以通过 thunk 执行 dispatch
多个操作。所以你可以把 toggleExpandedProp
变成一个 thunk 动作。
您可能需要重新考虑其中的一些逻辑。在展开节点时从 API 中获取子节点然后在折叠节点时再次获取它们真的有意义吗?
export const toggleExpandedProp = createAsyncThunk(
"data/nodes/toggleExpandedProp",async (params,{ dispatch }) => {
dispatch(getChildren(params));
}
);
这有点无用,因为我们实际上并没有返回任何东西。您可以将其与 getChildren
操作结合使用,还是也需要单独调用该操作?
const nodesSlice = createSlice({
name: "nodes",initialState,reducers: {
},extraReducers: {
[toggleExpandedProp.pending]: (state,action) => {
state.data.forEach((element) => {
if (element.id === action.payload.id) {
element.expanded = !element.expanded;
}
});
},[getRoot.fulfilled]: (state,action) => {
state.data = action.payload;
},[getChildren.fulfilled]: (state,action) => {
state.data.push(action.payload);
}
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。