ReactJS - infinite loop when dispatch the redux action - reactjs

Question

i got some problem for a couple hours, i really dont know why useeffect give me infinite loop when i dispatch the redux action ? because i want my page is will refresh after i change the value from order state. is there not allowed to put the async state from redux in useeffect? sorry im still new..
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>
)