可以從 Redux thunk 使用 router.push 嗎？ 這是一個好習慣嗎？

Question

我有這個錨元素：

<a
  className="btn btn-sm btn-circle"
  href={`https://www.facebook.com/sharer/sharer.php?u=${
    process.env.NEXT_PUBLIC_ENVIRONMENT == "prod"
      ? "https://tikex.com"
      : "https://tikex-staging.com"
  }/share/${organizationSlug}/${postId}&quote=${postSurveySchemaDTO?.caption}`}
  onClick={(e) => {
    dispatch(
      createShare({
        tempUserId: "e3445c3b-5513-4ede-8229-d258ed4418ae",
        postId,
      })
    );
  }}
>
  Megosztom
</a>

我測試了很多次，也許只有一次，但似乎在那種情況下沒有觸發 onclick 和網絡，99% ok。 如果在聯網完成后我也從onClick觸發導航會更好嗎？

我可以從reducer / thunk觸發router.push()嗎？

像這樣？

export const createShare = createAsyncThunk(
    `${namespace}/createShare`,
    async (props: any, { dispatch }) => {
        const { data } = await axios({
            method: 'post',
            url: 'share',
            data: props,
            headers: { crossDomain: true },
        }).then((res) => {
            router.push(`http://...`)
            return res
        })
        return data
    }
)

Answer 1

看起來你有一個比賽條件。

1. <a>正在嘗試將瀏覽器導航到href
2. onClick有一個dispatch(createShare(...))觸發器

我建議阻止默認的<a>事件並手動編排這兩個單獨的事件 -

onClick(e => {
  e.preventDefault() // stop the browser from trying to navigate away
  dispatch(
    createShare({
      ...
      thenNavigateTo: e.target.href // or whatever
    })
  )
}

如果您需要router進行導航，您可以將 thunk 傳遞給已調度的操作 -

onClick(e => {
  e.preventDefault() // stop the browser from trying to navigate away
  dispatch(
    createShare({
      ...
      andThen: _ => router.push(e.target.href) // or whatever
    })
  )
}