愿所有的美好和期待都能如约而至

Redux状态值在第二次单击时更改

发布时间:  来源:互联网  作者:匿名  标签:error redux state value changed at second click exception IT资讯 javascript react-  热度:37.5℃

本文介绍了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
}

这篇关于Redux状态值在第二次单击时更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP