React 未检测到 Redux 存储中的更新

Question

您好，我有一个 react redux 存储，用于存储有关当前登录用户的信息。这是我的减速器和我的操作：

interface Account {
    username: string | null;
    isLoggedIn: boolean;
    role: string | null;
}

const accountReducer = (state: Account, action: any): Account | {} => {
    switch (action.type) {
        case "SET_ACCOUNT":
            return {
                username: action.payload.username,
                isLoggedIn: action.payload.isLoggedIn,
                role: action.payload.role,
            };

        case "LOGOUT_ACCOUNT":
            return {
                username: null,
                isLoggedIn: false,
                role: null,
            };

        default:
            return { ...state };
    }
};

export default accountReducer;

interface Account {
    username: string | null;
    isLoggedIn: boolean;
    role: string | null;
}

const setAccount = (account: Account) => {
    return {
        type: "SET_ACCOUNT",
        payload: account,
    };
};

const logoutAccount = () => {
    return {
        type: "LOGOUT_ACCOUNT",
        payload: {
            username: null,
            isLoggedIn: false,
            role: null,
        },
    };
};

export default { setAccount, logoutAccount };

我有一个注销按钮，它调用以下函数：

const logoutUser = async (): Promise<void> => {
        await axios({
            method: "POST",
            url: API.logout,
            withCredentials: true,
            headers: {
                "X-CSRF-TOKEN": csrf.token,
            },
        });
        dispatch(allActions.accountActions.logoutAccount());
    };

但是现在当我单击注销按钮时，我会被注销，但是我正在访问帐户属性的其他组件都没有得到更新。我尝试将window.location.reload() 放在调度功能下，但由于某种原因这并没有刷新我的窗口。如果可能，我还想避免刷新窗口，因为这是一个 SPA。

这是我需要更新的组件之一的示例：

import React from "react";
import { NavLink, Link } from "react-router-dom";
import { useSelector } from "react-redux";

import "../../css/Navbar.css";
import LoggedInDiv from "../account/LoggedInDiv";
import LoginRegisterDiv from "../account/LoginRegisterDiv";

const Navbar: React.FC = () => {
    const account = useSelector((state: any) => state.accountReducer);

    return (
        <div className="main-navbar-container">
            <div className="navbar-logo-container">
                <h1 style={{ padding: "0px", margin: "0px" }}>
                    <Link to="/" className="navbar-link">
                       Logo
                    </Link>
                </h1>
            </div>
            <div style={{ display: "flex", flexDirection: "column" }}>
                <div className="navbar-links-container">
                    <NavLink to="/builder" className="navbar-link" activeClassName="navbar-link-active">
                        Builder
                    </NavLink>
                    <NavLink
                        to="/finishedbuilds"
                        className="navbar-link"
                        activeClassName="navbar-link-active"
                    >
                        Finished Builds
                    </NavLink>
                    <NavLink to="/about" className="navbar-link" activeClassName="navbar-link-active">
                        About
                    </NavLink>
                    <NavLink to="/user/login" className="navbar-link" activeClassName="navbar-link-active">
                        Contact
                    </NavLink>
                </div>
                <div style={{ marginLeft: "21px", marginTop: "6px" }}>
                    <div className="account-container">
                        {account.isLoggedIn ? (
                            <LoggedInDiv username={account.username} />
                        ) : (
                            <LoginRegisterDiv />
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Navbar;

好的，我终于找到了问题所在。我对/logout 的axios POST 请求实际上返回了一个错误并崩溃了，所以在请求之后我什至没有到达dispatch。我只是将 axios 代码包装在一个 try catch 块中，直到我发现为什么我的后端在我尝试注销时给我错误，即使它成功注销了我。

Answer 1

首先，您应该始终将您的状态设置为初始状态

const INITIAL_STATE = {
    username: null,
    isLoggedIn: false,
    role: null
}

然后在你的减速器中将其设置为state: Account = INITIAL_STATE

这是为了防止您的商店在 undefined 被填充之前返回它。

在您的操作中使用常量类型也是一种很好的做法，以避免在 reducer 或操作中拼写错误。

当涉及到组件没有更新时，我怀疑组件没有正确连接到 redux 存储，并且如果它们没有收到存储已更改的通知（例如新道具或本地状态正在更改） )，它们不会重新渲染。

如果不查看实际代码，很难判断实际问题出在哪里。但是你应该检查所有需要重新渲染的组件，看看它们是否真的收到了更新的 redux 状态。

编辑：

const Navbar: React.FC = (props) => {
    const account = props.account;

    return ( your code );

};

const mapStateToProps = (state: any) => {
    return state.accountReducer;
};

export default connect(mapStateToProps)(Navbar);

Answer 2

好的，我终于找到了问题所在。我对/logout 的 axios POST 请求实际上返回了一个错误并崩溃了，所以在请求之后我什至没有到达dispatch。我只是将 axios 代码包装在一个 try catch 块中，直到我发现为什么我的后端在我尝试注销时给我错误，即使它成功注销了我。