使用useDispatch无法修改Redux状态的问题排查求助

我在使用useDispatch Hook时无法修改Redux状态，尝试其他Hook也没效果，查了很多资料还是找不到问题，下面是组件、Action、Reducer、Store及常量文件的代码，帮忙找出错误原因。

组件代码 #

import React from 'react';
import {useDispatch} from "react-redux";
import {loginAction, passwordAction} from "../action/userAction";
import storeConfiguration from "../store/storeConfiguration";
import {changeLogin, changePassword} from "../utils/Const";


const Login = () => {

    const dispatch = useDispatch()
    const stateUser = storeConfiguration.getState()

    const senData = () => {
        localStorage.setItem(stateUser.login, stateUser.password)
        console.log(storeConfiguration.getState());
        let keys = Object.keys(localStorage);
        for(let key of keys) {
            console.log(`${key}: ${localStorage.getItem(key)}`);
            dispatch(loginAction())
            dispatch(passwordAction())
        }
    }

    function clear() {
        localStorage.clear();
    }

    return (
        <div>
            <p>Please, enter Username</p>
            <input placeholder={'your login'}
                   onChange={e => changeLogin( e.target.value)}/>
            <p>Please, enter Password</p>
            <input placeholder={'your password'}
                   onChange={e => changePassword( e.target.value)}/>
            <p></p>
            <button onClick={()=>senData()}>Enter</button>
            <button onClick={()=>clear()}>clear</button>
        </div>
    );
};

export default Login;

Action代码 #

export const LOGIN = 'loginAction'
export const PASSWORD = 'passwordAction'

export const loginAction = login =>(
    {
        type: LOGIN,
        payload: login
    })

export const passwordAction = password =>(
    {
        type: PASSWORD,
        payload: password
    })

Reducer代码 #

import {LOGIN, PASSWORD} from "../action/userAction";

function userReducer (state, action)
{
    switch (action.type){
        case LOGIN:
            return {...state, login: action.payload }
        case PASSWORD:
            return {...state, password: action.payload }
        default:
            return state
    }
}
export default userReducer

Store代码 #

import userReducer from "../reducer/userReducer";
import { legacy_createStore as createStore} from 'redux'



const initialState =
    {
            login:'',
            password: '',
    }

const store = createStore(userReducer, initialState)

export default store

常量文件代码 #

export const currentLogin = 'Admin'
export const currentPassword = '12345'

export const changeLogin = (login) => {
    return login
}
export const changePassword = (password) => {
    return password
}

问题根源 #

1. 输入框未触发Redux更新：输入框onChange调用的是常量文件里的changeLogin/changePassword，这两个函数仅返回传入值，完全没关联Redux的dispatch，根本不会触发状态更新。
2. dispatch未传payload：senData里调用dispatch(loginAction())时没传参数，导致Action的payload为undefined，Reducer无法正确更新login/password值。
3. 直接操作store实例：组件用storeConfiguration.getState()获取状态，不符合React-Redux规范，应该用useSelector Hook获取状态，直接操作store会导致组件无法响应状态变化。
4. localStorage存储逻辑错误：localStorage.setItem(stateUser.login, stateUser.password)用当前login值作为key，初始状态login为空字符串，会导致存储键为空；逻辑上应该用固定键名存储，比如'user_login'。

修复方案 #

1. 修改组件代码

import React from 'react';
import {useDispatch, useSelector} from "react-redux";
import {loginAction, passwordAction} from "../action/userAction";

const Login = () => {
    const dispatch = useDispatch()
    // 用useSelector获取Redux状态
    const { login, password } = useSelector(state => state)

    const senData = () => {
        // 固定键名存储用户信息
        localStorage.setItem('user_login', login)
        localStorage.setItem('user_password', password)
        console.log('当前Redux状态:', { login, password });
        console.log('localStorage内容:', {
            user_login: localStorage.getItem('user_login'),
            user_password: localStorage.getItem('user_password')
        });
    }

    function clear() {
        localStorage.clear();
        // 清空Redux状态
        dispatch(loginAction(''))
        dispatch(passwordAction(''))
    }

    return (
        <div>
            <p>请输入用户名</p>
            <input 
                placeholder={'你的用户名'}
                value={login} // 绑定状态实现受控组件
                onChange={e => dispatch(loginAction(e.target.value))}
            />
            <p>请输入密码</p>
            <input 
                placeholder={'你的密码'}
                value={password} // 绑定状态实现受控组件
                onChange={e => dispatch(passwordAction(e.target.value))}
            />
            <p></p>
            <button onClick={senData}>提交</button>
            <button onClick={clear}>清空</button>
        </div>
    );
};

export default Login;

2. 精简常量文件

删除无用的changeLogin/changePassword函数：

export const currentLogin = 'Admin'
export const currentPassword = '12345'

3. 确保根组件用Provider包裹

必须用Provider包裹App，让子组件能访问Redux store：

import { Provider } from 'react-redux'
import store from './store/storeConfiguration'
import Login from './components/Login'

function App() {
  return (
    <Provider store={store}>
      <Login />
    </Provider>
  )
}

export default App

内容的提问来源于stack exchange，提问作者Aleksandr