在 redux 中调度存储变量时，React 组件不会重新渲染答案

【问题标题】：React component not re-render when a store variable is dispatched in redux在 redux 中调度存储变量时，React 组件不会重新渲染
【发布时间】：2021-07-21 04:32:50
【问题描述】：

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';

import { logedInAction } from '../../redux/userDetails/userDetailsActions';

import Loading from '../Loading/Loading';
import ChatList from './ChatList/ChatList';

const MainWindow = () => {
    const { isLoged } = useSelector( state => state.userDetails );
    const dispatch = useDispatch();
    const history = useHistory();

    const [ loading , setLoading ] = useState(true);

    useEffect( () => { 
        const dataFetcher = async () => {
            try {
                const res = await fetch( "http://localhost:4000/" , { credentials: 'include' });
                // doing some code and dispatching isLoged variable to true
                setLoading(false);
            } catch(e) { console.log(e); }
        }
        dataFetcher();
    } , [ dispatch , history ] );

    return(
        <>
            {
                loading ? <Loading  /> : 
                isLoged ? <ChatList /> : <div> error</div>
            }
        </>
    );
}

export default MainWindow;

当这个程序启动时，变量 lodaing 为 true ；所以组件被渲染。运行 datafecter 后，变量 lodaing 变为 false，isLoged 变为 true。

最初 isLoged 为 false ；我从 redux 商店获得了它。当我将它发送到 true 之间时，它会将其值更改为 true （我在反应开发工具中看到了值的变化）。但它并没有重新渲染它的价值。

ie，如果 lodaing 为 false 而 isLoged 为 true，我应该得到组件。但不幸的是，我收到了错误组件。这意味着 isLoged 的 值未呈现。

如何解决这个 REDUX 渲染问题？

【问题讨论】：

标签： javascript reactjs redux rerender

【解决方案1】：

这个问题可能是由 React 完全更新本地状态所花费的延迟引起的，因此只有当状态 loading 发生变化时，您才需要使用 useEffect 来调度您的操作。所以：

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';

import { logedInAction } from '../../redux/userDetails/userDetailsActions';

import Loading from '../Loading/Loading';
import ChatList from './ChatList/ChatList';

const MainWindow = () => {
    const { isLoged } = useSelector( state => state.userDetails );
    const dispatch = useDispatch();
    const history = useHistory();

    const [ loading , setLoading ] = useState(true);

    useEffect( () => { 
        const dataFetcher = async () => {
            try {
                const res = await fetch( "http://localhost:4000/" , { credentials: 'include' });
                setLoading(false);
            } catch(e) { console.log(e); }
        }
        dataFetcher();
    } , [ dispatch , history ] );

    useEffect( () => { 
       // this "if" guarantee that the local state `loading` and the store state `isLoged` will be false at this point
       if(!loading && !isLoged) {
         // doing some code and dispatching isLoged variable to true
       }
       
    } , [ loading ] );

    return(
        <>
            {
                loading ? <Loading  /> : 
                isLoged ? <ChatList /> : <div> error</div>
            }
        </>
    );
}

export default MainWindow;

【讨论】：