Redux状态值在第二次单击时更改
我是Redux的新手,我已经将它与我的Reaction应用程序集成在一起,但我有一个关于小测试的说明。
在下一个示例中,我看到在第二次单击时添加了User的值。
减速机:
const initialState = {
user: '',
password: ''
}
export const admin = (state = initialState, action) => {
switch (action.type) {
case 'admin':
return state = {
user: action.user,
password: action.password
}
default:
return initialState;
}
}
操作:
const adminAction = (user, password) => {
return {
type: 'admin',
user: user,
password: password
}
}
export default adminAction;
正在更改存储中的状态。
const admin = useSelector(state => state.admin);
const dispatch = useDispatch();
var user,pass = '';
const adminChangeUsername = (event) => {
user = event.target.value;
}
const adminChangePassword = (event) => {
pass = event.target.value;
}
const click= (event) => {
event.preventDefault();
dispatch(adminAction(user,pass));
console.log(store.getState())
console.log(admin.user)
}
单击与按钮关联的空。
第一次点击时,会发生以下情况:
存储中的值已更改,但admin.user值仍为空。
再次单击时: 存储值已更新 已添加管理员值。
我的问题是,为什么只有第二次点击才会触发从存储中检索值?
解决方案
admin
对象将在下一次组件重新呈现过程后,在执行完整个点击回调后,返回给admin
对象。
实际上,它基于useSelector
提供的值,该值在呈现期间触发一次。
admin.user
正在click
回调中检查,该组件尚未重新赋值,因此在第一个交叉处显示当前的空字符串值。
1)组件是第一次呈现。
2)useSelector
被调用。
3)点击。
4)已调度操作。
5)admin.user
仍为空,因为2)尚未重新运行。
6)click
回调完成后,即将重新渲染,再次触发useSelector
,抓取管理员value
!
故事的寓意:
不要期望从useSelector
提供的值在单击回调中立即同步。
需要重新呈现过程才能进行。
此外,为了改进代码,您可以替换:
return state = {
user: action.user,
password: action.password
}
按此:
return {
user: action.user,
password: action.password
}
相关文章