javascript - useSelector 钩子(Hook)首先返回未定义的状态，然后在操作调用后正确返回状态

Question

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

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