Redux状态值在第二次单击时更改 [英] redux state value changed at second click

问题描述

我是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状态值在第二次单击时更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！