我正在执行创建操作。当用户单击“提交”时,我正在调度一个操作,该操作在数据库中创建资源,并使用从API调用返回的信息更新存储,该API调用包含状态(指示操作状态)和错误或消息等信息。
const initialState = {
loading: true,
status: false,
error: false
}
以上是我的redux存储的初始状态
const {loading,status} = useSelector(state=>state.newUser)
我正在使用useSelector
使用状态
const addUser = (values) => async (dispatch) => {
const response = // Makes an API call return information
dispatch({type:"ADD_USER",payload:response.data})
}
onSubmit = (values)=>{
dispatch(addUser(values))
.then(data=>{
console.log(data)
})
if(!status){
}
}
在上面的onSubmit函数中,当用户提交表单时,它会调度一个操作并更新存储。现在,我要根据新的状态更新UI。调度后,我要检查操作的状态是true还是false。如果为false,我要显示错误。问题是在调度之后,如果我尝试访问status
,它会从initialState
给我status
值。我想在状态更新后执行if(!status)
。
2条答案
按热度按时间s71maibg1#
在Redux中,一切都是声明性的,你不能像在promise调用中那样等待异步操作,相反,你必须为失败分派一个操作,并将错误存储在reducer中。
您的thunk应该如下所示
然后,在组件中,您必须侦听所需的所有值,并基于这些值以声明方式编写呈现逻辑。
如果你需要触发一些基于它的逻辑,那么你应该在thunk本身中做。如果你需要在redux状态的值改变时触发组件中的一些函数,那么你必须使用
useEffect
并将值作为依赖项传递。2nbm6dog2#
在Redux中:
首先,最好更新状态,使其仅包含
status
,并且其值应根据请求的状态进行更改。status = 'idle'
或status = 'loading'
或status = 'succeded'
或status = 'failed'
第二,在
addUser function
中,您应该在请求之前使用await
关键字。第三,你应该检查请求的状态,如果它失败或成功,这可以在
addUser function
内部完成,并分派两个操作之一,一个用于失败,另一个用于成功,以更新状态,或者你可以在分派你的操作'({type:“ADD_USER”,payload:response.data})之后完成,并检查reducer中的响应数据以更新状态。在UI中:
你需要通过
useSelector
访问数据,但是在表单提交后执行一个操作,该操作将更新存储中的状态。你应该在useEffect
钩子中执行此操作。