useSelector钩子首先返回未定义状态，然后在操作调用后正确返回状态

Question

我是React钩子的新手，我试图将我的项目与redux集成，问题是在我用于登录的函数组件中，当我试图用useSelector获取initialState属性时，状态是未定义的。

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>
);
}

单击按钮后，它会打印出正确的状态，但在最初渲染时，它会输出未定义的状态。那么我应该修改什么呢？

这是我的其余代码。非常感谢。

App.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

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

const login = (user, logged)=> {
return {
type:'ONLOGIN',
user: user,
logged: true
}
}

export {login}

Answer 1

您需要在第一次加载时获取存储状态以获得初始状态。

actions.js

const fetchState = () => {
return {type: 'FETCH_STATE'}
}

reducer.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;
}
}

最后，在组件中，您需要在第一次加载时使用React.useEffect或componentDidMount获取状态

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

Answer 2

上面的代码运行良好。我自己运行了上面的代码，并使用useSelector成功地获得了initialState属性。

｛logged:true，user:"jared"，empresas:null｝logged:true用户："jared"empresas：空。

你的项目中可能存在问题，比如

1. 您应该检查是否导出了正确的减速器功能