如何解决使用promise错误测试createAsyncThunk
我正在JS的Redux Toolkit中测试createAsyncThunk API,但出现错误,需要一些帮助。
我只是复制react Todo示例,我试图创建一个延迟添加todo函数来测试redux thunk。 这是AddTodo React Arrow功能组件
import React,{ useState } from 'react';
import { connect,useDispatch } from 'react-redux';
import { delayAddToDo,addTodo } from './todosSlice';
const AddTodo = ({ addTodo,delayAddToDo }) => {
const [todoText,setTodoText] = useState('');
const dispatch = useDispatch();
const onChange = e => {
setTodoText(e.target.value);
};
return (
<div>
<form
onSubmit={e => {
e.preventDefault();
if (!todoText.trim()) {
return;
}
dispatch(delayAddToDo(todoText));
//addTodo(todoText);
setTodoText('');
}}
>
<input value={todoText} onChange={onChange} type="text" />
<button type="submit">Add Todo</button>
</form>
</div>
);
};
const mapDispatchToProps = { addTodo,delayAddToDo };
export default connect(null,mapDispatchToProps)(AddTodo);
这是todosSlice
import { createSlice,createAsyncThunk } from '@reduxjs/toolkit';
let nextTodoId = 0;
export const delayAddToDo = createAsyncThunk('todos/delayAddTodo',() => {
console('delayAddTodo');
const delayAdd = (resolve,reject) => {
setTimeout(function () {
resolve('Success!');
},5);
};
return new Promise(delayAdd);
});
const todosSlice = createSlice({
name: 'todos',initialState: [],reducers: {
addTodo: {
reducer: (state,action) => {
console.log('adding todo');
const { id,text } = action.payload;
state.push({ id,text,completed: false });
},prepare: text => {
console.log('prepare');
return { payload: { text,id: nextTodoId++ } };
},},toggleTodo(state,action) {
const todo = state.find(todo => todo.id === action.payload);
if (todo) {
todo.completed = !todo.completed;
}
},extraReducers: {
[delayAddToDo.fulfilled]: (state,action) => {
console.log('fullfilled');
//state = [];
},});
export const { addTodo,toggleTodo } = todosSlice.actions;
export default todosSlice.reducer;
我在控制台中收到一条错误消息,说 在以下路径中的某个操作中检测到不可序列化的值:...
谢谢
解决方法
我认为这是因为您正在解析一个不可序列化的函数。这样的东西怎么样?
const delayAdd = () => new Promise(resolve => {
setTimeout(function () {
resolve('Success!');
},5);
})
export const delayAddToDo = createAsyncThunk('todos/delayAddTodo',async() => {
const result = await delayAdd()
return result;
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。