React - what is the proper way to do global state?-CodePudding

I have here an app, and I want the App component to hold the current logged in user. I have the following routes and components.

Basically, every component in my app will make use of the user object. Sure I can pass the user as props to each and every component, but that is not elegant. What is the proper React way of sharing the user prop globally?

const App = () => {
    const [user, setUser] = useState(null);

    return (
        <Router>
            <div className="app">
                <Topbar />
                <Switch>
                    <Route path="/login" exact component={Login} />
                    <Route path="/home" exact component={Home} />
                    <Route path="/" exact component={ShopMenu} />
                    <Route path="/orders">
                        <Orders />
                    </Route>
                    <Route path="/wishlist" exact component={Wishlist} />
                    <Route path="/wallet" exact component={Wallet} />
                    <Route path="/cart" exact component={Cart} />
                </Switch>
                <BottomBar />
            </div>
        </Router>
    );
};

CodePudding user response：

Welcome to stack overflow;

Yes you can save your state globally for which react-redux library react offers in which you need to store your state globally and you can access state in any component from redux

here is the complete guide

You can also check

complete guide here of how to use redux with react

Also you can use context api check here for context api

CodePudding user response：

Take a look at React Context and more specifically useContext as you're using hooks.

The idea of context is exactly that - for you to be able to share updateable state to the descendants without having to pass it from component to component.

const UserContext = React.createContext(null);

const App = () => {
  const [user, setUser] = useState(null);

  return (
    <Router>
      <div className="app">
        <UserContext.Provider value={user}>
          <Topbar />
          <Switch>
            <Route path="/login" exact component={Login} />
            <Route path="/home" exact component={Home} />
            <Route path="/" exact component={ShopMenu} />
            <Route path="/orders">
              <Orders />
            </Route>
            <Route path="/wishlist" exact component={Wishlist} />
            <Route path="/wallet" exact component={Wallet} />
            <Route path="/cart" exact component={Cart} />
          </Switch>
          <BottomBar />
        </UserContext.Provider>
      </div>
    </Router>
  );
};

Then, in your component:

const Topbar = () => {
  const user = useContext(UserContext);

  // use `user` here
};

If you want to have access to the setter (setUser) you can pass it throught the context as well.