React not detecting an update in the Redux store

Question

Hello I have a react redux store where I store the info about the currently logged in user. Here is my reducer and my actions:

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

And I have a logout button which calls the following function:

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

But now when I click the logout button, I get logged out, but none of my other components which are accessing the account properties are getting updated. I tried putting window.location.reload() under the dispatch function, but that isn't refreshing my window for some reason. I would also like to avoid refreshing the window if possible, since this is a SPA.

Here's an example of one of my components which need to be updated:

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;

Okay so I finally found the problem. My axios POST request to /logout was actually returning an error and crashing, so I never even got to the dispatch after the request. I just wrapped the axios code in a try catch block until I find why is my backend giving me errors when I try to logout, even though it logs me out successfully.

Answer 1

Okay so I finally found the problem. My axios POST request to /logout was actually returning an error and crashing, so I never even got to the dispatch after the request. I just wrapped the axios code in a try catch block until I find why is my backend giving me errors when I try to logout, even though it logs me out successfully.

Answer 2

First of all, you should always set your state to an initial state

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

And then in your reducer you set it to state: Account = INITIAL_STATE

This is to prevent your store from returning undefined before it's populated.

It is also a good practice to use constant types for your actions, to avoid misspelling them in either the reducer or action.

When it comes to the components not updating, I suspect that the components isn't correctly connected to the redux store, and if they don't get notified that the store has changed (e.g. new props, or local state being changed), they wont re-render.

It's hard to tell where the actual problem is, without seeing the actual code. But you should check all components that need to re-render, to see if they actually receives the updated redux state.

Edit:

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

    return ( your code );

};

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

export default connect(mapStateToProps)(Navbar);