Блог

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

Я просто копирую пример react Todo, я пытаюсь создать функцию delay add todo, чтобы протестировать повторный запуск. Это функциональный компонент 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 resu<
});