UseDispatch挂钩反应冗余



帮助我理解。我使用useDispatch,但我不更改状态。我做错了什么。我读了很多信息,但我不明白我的错误是什么。

我试过其他钩子,但都没用。

我已经在下面的代码上做了标记以使其清楚。减速器、动作、存储、组件

组件:

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;

动作:

export const LOGIN = 'loginAction'
export const PASSWORD = 'passwordAction'
export const loginAction = login =>(
{
type: LOGIN,
payload: login
})
export const passwordAction = password =>(
{
type: PASSWORD,
payload: password
})

减速器:

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

存储:

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

const initialState =
{
login:'',
password: '',
}
const store = createStore(userReducer, initialState)
export default store

const:

export const currentLogin = 'Admin'
export const currentPassword = '12345'
export const changeLogin = (login) => {
return login
}
export const changePassword = (password) => {
return password
}

在这两行代码中

dispatch(loginAction())
dispatch(passwordAction())

你还没有通过任何有效载荷,所以实际上什么都不能改变

相关内容

  • 没有找到相关文章

最新更新