可以从 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
    })
  )
}