тестирование createAsyncThunk с ошибкой обещания

Question

Я тестирую API createAsyncThunk в Redux Toolkit на JS, и у меня возникла ошибка, мне нужна помощь.

Я просто копирую пример реакции Todo, я пытаюсь создать функцию delay add todo для тестирования redux thunk. Это компонент функции стрелки AddTodo React

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;

Я получил сообщение об ошибке в консоли: в действии обнаружено несериализуемое значение в пути:...

Благодарность

Answer 1

Я думаю, это связано с тем, что вы разрешаете функцию, которая не является сериализуемой. Как насчет чего-то вроде этого?

const delayAdd = () => new Promise(resolve => {
  setTimeout(function () {
    resolve('Success!');
  }, 5);
})

export const delayAddToDo = createAsyncThunk('todos/delayAddTodo', async() => {
  const result = await delayAdd()

  return result;
});