可以从redux thunk中使用路由器。这是一个好习惯吗？

发布于 2025-02-06 07:55:51 字数 1227 浏览 1 评论 0原文

我有这个锚点元素：

<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％可以。如果我也从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
    }
)

原文

I have this anchor element:

<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}"e=${postSurveySchemaDTO?.caption}`}
  onClick={(e) => {
    dispatch(
      createShare({
        tempUserId: "e3445c3b-5513-4ede-8229-d258ed4418ae",
        postId,
      })
    );
  }}
>
  Megosztom
</a>

I tested many times, maybe one time only but seem than onclick and networking was not triggered in that case, 99% ok. Is it better if I trigger navigation also from onClick after networking was done?

Can I trigger router.push() from reducer / thunk?

Like this?

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
    }
)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

明天过后 2025-02-13 07:55:52

似乎您有种族状况。

＆lt; a＆gt;正在尝试将浏览器导航到href
onclick onclick 具有dispatch（createShare（... ）触发器，

我建议防止默认＆lt; a＆gt;事件，并手动编排两个单独的事件 -

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
    })
  )
}

It seems like you have a race condition.

the the <a> is trying to navigate the browser away to the href
onClick has a dispatch(createShare(...)) trigger

I would suggest preventing the default <a> event and manually choreograph the two separate events -

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

If you need router to navigate, you can pass a thunk to the dispatched action -

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

回复收藏 0 原文

~没有更多了~