Javascript 第二次单击时更改了redux状态值

我是redux的新手，我已经将它与我的react应用程序集成，但我有一个关于小测试的说明

在下一个示例中，我看到在第二次单击时添加了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

对象

实际上，它基于渲染期间触发一次的

useSelector

提供的值

管理员用户

在

单击

回调中进行检查时，组件尚未重新读取，因此在第一次交叉时显示当前空字符串值

1） 组件是第一次呈现的。
2） 调用了

useSelector

。
3） 单击已完成。
4） 已发送操作。
5）

admin.user

仍然为空，因为2）尚未再次运行。
6） 在

单击

回调完成后，将进行重新排序，因此再次触发

使用选择器

，获取admin

值

故事的寓意：
不要期望从

useSelector

提供的值在单击回调中立即同步。 它需要重新招标的过程才能发生

此外，为了改进代码，您可以替换：

return state = {
                user: action.user,
                password: action.password
}

据此：

return {
         user: action.user,
         password: action.password
}

---

admin

对象将在执行整个单击回调后，在下一个组件重新排序过程后被馈送

实际上，它基于渲染期间触发一次的

useSelector

提供的值

管理员用户

在

单击

回调中进行检查时，组件尚未重新读取，因此在第一次交叉时显示当前空字符串值

1） 组件是第一次呈现的。
2） 调用了

useSelector

。
3） 单击已完成。
4） 已发送操作。
5）

admin.user

仍然为空，因为2）尚未再次运行。
6） 在

单击

回调完成后，将进行重新排序，因此再次触发

使用选择器

，获取admin

值

故事的寓意：
不要期望从

useSelector

提供的值在单击回调中立即同步。 它需要重新招标的过程才能发生

此外，为了改进代码，您可以替换：

return state = {
                user: action.user,
                password: action.password
}

据此：

return {
         user: action.user,
         password: action.password
}

---

在

click

函数中看到

admin

的旧值的原因是闭包导致道具过时和状态问题

JavaScript中的每个函数都维护对其外部函数的引用 词汇环境。此引用用于配置执行 调用函数时创建的上下文。此参考启用 函数内部的代码，用于“查看”函数外部声明的变量 函数，无论何时何地调用该函数

在React函数组件中，每次组件重新渲染时，都会重新创建闭包，因此来自一个渲染的值不会泄漏到不同的渲染中。出于同样的原因，您想要的任何状态都应该在

useState

或

useReducer

钩子中，因为它们将保持过去的重新渲染

更多信息请参见

---

除了问题的主要答案外，您还应该

useState

查看组件中

user

和

pass

的值。否则，值不会停留在重新渲染之间

否则，您可以不使用受控组件，但不能使用两者的奇怪组合

工作示例如下：

const initialstate={
用户：“”，
密码：“”，
};
常量adminReducer=（状态=初始状态，操作）=>{
开关（动作类型）{
案例“管理”：
返回（状态={
用户：action.user，
密码：action.password，
});
违约：
返回初始状态；
}
};
const adminAction=（用户、密码）=>{
返回{
键入：“admin”，
用户:用户,，
密码：密码，
};
};
const store=Redux.createStore（Redux.combineReducers（{admin:adminReducer}））；
常量应用=（）=>{
const store=ReactRedux.useStore（）；
const admin=ReactRedux.useSelector（（state）=>state.admin）；
const dispatch=ReactRedux.usedpatch（）；
const[user，setUser]=React.useState（“”）；
const[pass，setPass]=React.useState（“”）；
const adminChangeUsername=（事件）=>{
setUser（event.target.value）；
};
const adminChangePassword=（事件）=>{
setPass（event.target.value）；
};
常量单击=（事件）=>{
event.preventDefault（）；
调度（adminAction（用户，通过））；
log（'store在这里有正确的值'，store.getState（））；
log（'admin是由于闭包而导致的admin的上一个值：'，admin）；
};
返回(
提交
显示存储中用户和密码的当前值

用户：{admin.User}

密码：{admin.password}

);
};
ReactDOM.render(
,
document.querySelector（“#root”）
);
您在
cli中看到
admin
旧值的原因