Javascript React Redux 在调度更改状态后如何向后端触发异步获取请求

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

const sendStateToBackend = createAsyncThunk('.../sendStateToBackend', async (state) => {
  // Implement your API call here and return the response data
  // For example, you might use fetch or axios to send the state to the backend
  // const response = await fetch('your-api-url', {
  //   method: 'POST',
  //   body: JSON.stringify(state),
  //   headers: {
  //     'Content-Type': 'application/json',
  //   },
  // });
  // const data = await response.json();
  // return data;
});

const todoSlice = createSlice({
  name: 'todo',
  initialState: { todos: [], isLoading: false },
  reducers: {
    addTodo: (state, action) => {
      state.todos.push(action.payload);
    },
  },
  extraReducers(builder) {
    builder
      .addCase(sendStateToBackend.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(sendStateToBackend.fulfilled, (state, action) => {
        state.isLoading = false;
        // Do something with the response data from the backend if needed
        // const responseData = action.payload;
      });
  },
});

export const { addTodo } = todoSlice.actions;
export default todoSlice.reducer;

import { useDispatch } from 'react-redux';
import { addTodo, sendStateToBackend } from './your-todo-slice';

const YourPageComponent = () => {
  const dispatch = useDispatch();

  const onSubmit = async (values) => {
    try {
      // Dispatch the addTodo action to update the state
      dispatch(addTodo(values));

      // Dispatch the sendStateToBackend action to send the updated state to the backend
      await dispatch(sendStateToBackend(values));
    } catch (error) {
      console.error('An error occurred while submitting the form: ', error);
    }
  };

  return (
    <div>
      {/* Your page content */}
    </div>
  );
};

export default YourPageComponent;