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

但是现在，当我单击注销按钮时，我被注销了，但是 none 正在访问帐户属性的其他组件正在更新。我尝试将 window.location.reload() 置于调度函数下，但由于某种原因，这并没有刷新我的 window。我还想尽可能避免刷新 window，因为这是一个 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
}

然后在你的 reducer 中将它设置为 state: Account = INITIAL_STATE

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

为操作使用常量类型也是一个好习惯，以避免在缩减程序或操作中拼写错误。

当涉及到组件未更新时，我怀疑组件没有正确连接到 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 块中，直到我发现为什么我的后端在我尝试注销时给我错误，即使它成功注销了我。

React 未检测到 Redux 商店中的更新

React not detecting an update in the Redux store

reactjs

react-redux

react-tsx