ReactJS - 调度 redux 动作时的无限循环

Question

几个小时以来我遇到了一些问题，我真的不知道为什么当我调度 redux 动作时 useeffect 给我无限循环？ 因为我希望我的页面在我从订单状态更改值后会刷新。 是否不允许将来自 redux 的异步状态置于使用效果？ 对不起我还是新的..

orderSlice.js

export const orderPay = createAsyncThunk(
  'order/orderPay',
  async (order, thunkAPI) => {
    try {
      const user1 = thunkAPI.getState().user.userInfo;
      const config = {
        headers: {
          'Content-Type': 'Application/json',
          Authorization: `Bearer ${user1.token}`,
        },
      };

      const res = await axios.put(
        `http://localhost:8000/api/order/${order.orderId}/pay`,
        order.paymentResult,
        config
      );
      const data = await res.data;
      return data;
    } catch (error) {
      thunkAPI.rejectWithValue(
        error.response && error.response.data.message
          ? error.response.data.message
          : error.response
      );
    }
  }
);

const orderSlice = createSlice({
  name: 'order',
  initialState: {
    loading: false,
    error: '',
    order: {},
    success: false,
  },
  reducers: {
    orderDetail: (state, action) => {
      state.order = action.payload;
    },
    orderPayReset: (state, action) => {
      state.loading = false;
      state.error = '';
      state.order = {};
      state.success = false;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(postOrder.pending, (state, action) => {
        state.loading = true;
        state.order = {};
        state.success = false;
      })
      .addCase(postOrder.fulfilled, (state, action) => {
        state.loading = false;
        state.order = action.payload;
        state.success = true;
      })
      .addCase(postOrder.rejected, (state, action) => {
        state.error = action.payload;
      })
      .addCase(orderDetail.pending, (state, action) => {
        state.loading = true;
        state.order = {};
        state.success = false;
      })
      .addCase(orderDetail.fulfilled, (state, action) => {
        state.loading = false;
        state.order = action.payload;
        state.success = true;
      })
      .addCase(orderDetail.rejected, (state, action) => {
        state.error = action.payload;
      })
      .addCase(orderPay.pending, (state, action) => {
        state.loading = true;
        state.success = false;
      })
      .addCase(orderPay.fulfilled, (state, action) => {
        state.loading = false;
        state.success = true;
      })
      .addCase(orderPay.rejected, (state, action) => {
        state.error = action.payload;
      });
  },
});

OrderScreen.jsx

const OrderScreen = () => {
  const navigate = useNavigate();
  const { orderId } = useParams();

  const [sdkReady, setSdkReady] = useState(false);

  const { paymentMethod } = useSelector((state) => state.cart);
  const { userInfo } = useSelector((state) => state.user);
  const { success, loading, error, order, orderPaid } = useSelector(
    (state) => state.order
  );

  const dispatch = useDispatch();

  useEffect(() => {
    const addPaypalScript = async () => {
      const res = await axios.get(`http://localhost:8000/api/config/paypal`);
      const data = await res.data;
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = `https://www.paypal.com/sdk/js?client-id=${data}`;
      script.async = true;
      script.onload = () => {
        setSdkReady(true);
      };
      document.body.appendChild(script);
      return data;
    };
    (async () => await addPaypalScript())();

    if (!order || success) {
      dispatch(orderPayReset());
      dispatch(orderDetail(orderId));
    } else if (!order.isPaid) {
      if (!window.paypal) {
        addPaypalScript();
      } else {
        setSdkReady(true);
      }
    }
  }, [orderId, dispatch]);

  const successPaymentHandler = (paymentResult) => {
    dispatch(orderPay({ orderId, paymentResult }));
    order.isPaid = true;
  };

  // console.log(orderPaid);

  return loading ? (
      <h1>Order {order._id}</h1>
)