[英]useSelector hook first returns undefined state and after an action call returns the state correctly
I'm new with React hooks and I try to integrate my project with redux, the thing is that in a function component that I use for login, when I try to get my initialState properties with useSelector the state is undefined.我是 React 钩子的新手,我尝试将我的项目与 redux 集成,问题是在我用于登录的 function 组件中,当我尝试使用 useSelector 获取我的 initialState 属性时,Z9ED39E2EA931588EF73E 是 undefinedA931588B6A9
import React, {useState} from 'react';
import loginStyles from './login.module.css';
import {useDispatch , useSelector, shallowEqual} from 'react-redux';
import {login} from '../../store/actions/actions';
export default (props) => {
const initialState = {
"email":'',
"password":''
}
const dispatch = useDispatch();
const [loginForm, setValue] = useState(initialState);
const changeValue = (event) => {
const name = event.target.name;
const value = event.target.value;
setValue(prevState => {
return {
...prevState,
[name]: value
}
});
}
useSelector((state) => {
console.log(state)
});
return (
<article className={loginStyles.main}>
<aside className={loginStyles.left}>
</aside>
<aside className={loginStyles.right}>
<div>
<input name="email" onChange={(event) => changeValue(event) } type = "text" value = {loginForm['email']} />
<input name="password" onChange={(event) => changeValue(event) } type = "text" value = {loginForm['password']} />
<button onClick={() => dispatch(login("jared", true))} >clicl</button>
</div>
</aside>
</article>
);
}
After I clicked the button it prints out the correct, state but at first render it prints out undefined.在我单击按钮后,它会打印出正确的 state 但首先渲染它会打印出未定义的内容。 So what should I modify?
那我应该修改什么?
Here's the rest of my code.这是我的代码的 rest。 Thank you.
谢谢你。
App.js应用程序.js
import React from 'react';
import {Provider} from 'react-redux';
import { createStore } from 'redux';
import reducer from './store/reducer';
import Layout from './layouts/main';
import './app.css';
function App() {
const store = createStore(reducer);
return (
<Provider store={store}>
<Layout />
</Provider>
);
}
export default App;
import React from 'react';
import {Provider} from 'react-redux';
import { createStore } from 'redux';
import reducer from './store/reducer';
import Layout from './layouts/main';
import './app.css';
function App() {
const store = createStore(reducer);
return (
<Provider store={store}>
<Layout />
</Provider>
);
}
export default App;
import React from 'react';
import {Provider} from 'react-redux';
import { createStore } from 'redux';
import reducer from './store/reducer';
import Layout from './layouts/main';
import './app.css';
function App() {
const store = createStore(reducer);
return (
<Provider store={store}>
<Layout />
</Provider>
);
}
export default App;
reducer.js减速器.js
const initialState = {
logged: false,
user: null,
empresas: null
}
const reducer = (state = initialState, action) => {
switch(action.type) {
case 'ONLOGIN': {
return {
...state,
user:action.user,
logged: true
}
}
case 'ONLOGOUT': {
return {
...state,
user: null,
logged: false
}
}
}
}
export default reducer;
actions.js动作.js
const login = (user, logged)=> {
return {
type:'ONLOGIN',
user: user,
logged: true
}
}
export {login}
You need to fetch the store state in first load to get the initial state.您需要在首次加载时获取存储 state 以获取初始 state。
actions.js动作.js
const fetchState = () => {
return {type: 'FETCH_STATE'}
}
reducer.js减速器.js
const reducer = (state = initialState, action) => {
switch(action.type) {
case 'ONLOGIN': {
return {
...state,
user:action.user,
logged: true
}
}
case 'ONLOGOUT': {
return {
...state,
user: null,
logged: false
}
}
case 'FETCH_STATE': {
return {
...state,
}
}
default:
return state;
}
}
Lastly in component you need to fetch state on first load either with React.useEffect
or componentDidMount
最后在组件中,您需要在首次加载时使用
React.useEffect
或componentDidMount
获取 state
import React, {useState} from 'react';
import loginStyles from './login.module.css';
import {useDispatch , useSelector, shallowEqual} from 'react-redux';
import {login} from '../../store/actions/actions';
export default (props) => {
const initialState = {
"email":'',
"password":''
}
const dispatch = useDispatch();
const [loginForm, setValue] = useState(initialState);
React.useEffect(() => {
dispatch(fetchState())
},[])
// remaining code
The above code is working fine.上面的代码工作正常。 I myself run the above code and successfully getting initialState properties with useSelector.
我自己运行上面的代码并使用 useSelector 成功获取了 initialState 属性。
{logged: true, user: "jared", empresas: null} logged: true user: "jared" empresas: null. {记录:真实,用户:“jared”,empresas:null} 记录:真实用户:“jared” empresas:null。
There may be the issues in your project like您的项目中可能存在问题,例如
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.