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

2022-06-21 00:00:00 javascript redux react-hooks react-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
}

相关文章