useNavigate阻塞createAsyncThunk，redux工具箱中的其余内容。
useNavigate阻塞createAsyncThunk，redux工具箱中的其余内容。
提问于 2022-03-14 12:27:43
我试图在redux工具箱中访问useNavigate hooke在createAsyncThunk中，如下所示：
export const onHandleBookmark = createAsyncThunk('articles/example', async (id: string, { dispatch, getState }) => {
const navigate = useNavigate()
console.log('DDD')
console.log('LLL')
//rest of the processing
})不幸的是，没有日志显示，因为它耗尽了第一行执行。谁能告诉我出什么事了吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-03-14 12:36:09
在组件之外调用像useNavigate这样的钩子是不允许的-在这种情况下，它可能会抛出一个错误。这并不是说这实际上与Redux或createAsyncThunk无关--它会在组件之外的任何地方发生。
如果需要添加到Redux组件之外的navigate，请参见没有导航支柱的导航
Stack Overflow用户
发布于 2022-06-02 15:50:11
选项A(更简单，需要redux-工具箱)：
在使用createAsyncThunk api时，返回的函数在默认情况下会得到改进。您可以使用unwrap()方法等待承诺解决方案(由生锈 (我猜是…)推断)。。当承诺被解决后，可以使用then()调用进一步链接，这样您就可以从那里导航：
import { useSelector, useDispatch } from "react-redux"
import { useNavigate } from "react-router"
import { logout } from "../store/auth"
const LogoutButton = () => {
const dispatch = useDispatch()
const navigate = useNavigate()
return (
<button
onClick={() =>
dispatch(logout())
.unwrap() // <-- async Thunk returns a promise, that can be 'unwrapped')
.then(() => navigate("/"))
}
>
Log out
</button>
)
}选项B (more 合并症，但在香草反应-redux中工作)：
虽然不能在React组件之外调用useNavigate()，但可以将其作为参数传递给dispatch()调用：
示例组件：
import { useSelector, useDispatch } from "react-redux"
import { useNavigate } from "react-router"
import { logout } from "../store/auth"
const LogoutButton = () => {
const dispatch = useDispatch()
const navigate = useNavigate() // <-- Grab the 'navigate' reference
return (
<button
onClick={() => dispatch(logout(navigate))} // <-- Pass 'navigate' as argument
>
Log out
</button>
)
}Redux异步Thunk
然后，您可以调用作为参数在thunk中传递的函数引用：
export const logout = createAsyncThunk(
"[auth] logout",
async (navigate) => {
const response = await axios.get("auth/logout")
if (response) {
navigate("/")
return response
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71467788
复制相关文章
相似问题
腾讯云开发者
