在Handlesubmit React Redux-Toolkit中使用异步等待

Question

我在一个React页面中有一个最终表格，如果所有数据都在其数据库中宣布，则需要向我展示全球成功。

我有两种部分形式（变化和GeneralInfo）将数据存储在SQL中的两个表中。

我使用表单中最后一步的此handlesubmit来存储此数据。

const handleSubmit = (e) => { 
    e.preventDefault();   
    dispatch(setDesignResponse(dataResponse));    
    dispatch(createNewVariations(variations));
    dispatch(createNewJsonResponse(newJsonResponse));    
  };

如果商店是成功的，我的切片会返回我的信息。

export const createNewJsonResponse = createAsyncThunk (
  "new-json-response/post",
  async (newData) => {  
    const { accesToken, newDataResponse } = newData;
    const res = await FaqsService.createNewResponse(newDataResponse, accesToken);    
    return res.data;
  }
);

export const createNewVariations = createAsyncThunk (
  "new-variations/post",
  async (variations) => {
    try {
      console.log(variations);
      const { token, variationsData } = variations;
      const res = await FaqsService.createNewVariations(variationsData, token);
      console.log(res.data);
      alert('VARIACIONES CREADAS PERFECTAMENTE');
      return res.data;
    } catch(error) { console.log(error);}
  }
);

如果只是我打电话给一个API，我知道如何显示和警报以通知用户。像上述代码（createNewvariations）一样。

但是我需要检查两者是否还可以，然后向用户显示警报。

我认为我可以在组件中，在handlesubmit中执行一些操作，以将信息发送到切片中，将数据存储在数据库中，返回结果succesfuly（具有从切片中返回true或false的状态（带有extrarducer）喜欢：

 extraReducers: {
    [createNewJsonResponse.fulfilled]:(state, action) => {      
      state.isCreated = action.payload.message; // initial state is: isCreated:false
    }
  }
//  (the same for the other slice).

）， 然后弹出警报。

是否可以？

谢谢

Answer 1

是的，您可以在两个状态切片中都创建，然后在您的综合条件上有条件，当两个ISCREATED标志为1时显示成功警报，

我为此创建了一个github示例，我正在使用计数器示例，

from # Redux + Plain JS template
npx create-react-app my-app --template redux

并修改了代码演示如何实现它。

您需要查看

我在逻辑以下的SRC/feature/counter/counter.js文件，这是组件的不完整代码，您可以在GitHub repo中查看。是的，您可以在多个切片上创建，并且在组件上有条件，这将为您寻找的工作。

    export function Counter() {
  const count = useSelector(selectCount);
  const incrementStatus = useSelector(incrementCountStatus);
  const incrementStatusNew = useSelector(incrementCountStatusNew);
  const dispatch = useDispatch();
  const [incrementAmount, setIncrementAmount] = useState('2');

  console.log(`Increment Status:`, incrementStatus);
  console.log(`Increment Status New:`, incrementStatusNew);

  const incrementValue = Number(incrementAmount) || 0;

  const handleAsyncSubmit = () => {
    dispatch(incrementByAmount(incrementValue))
    dispatch(incrementAsyncNew(incrementValue))
  }

  if (incrementStatus === 'success' && incrementStatusNew === 'success') {
    alert('Data have been saved successfully.');
  }

github repo