3

I am wrapping my App.js file in the withLDProvider component and I want to know how I can set the user information from inside of my App function.

Let's say for example I get the username that is cached in Dexie inside of my App function, how can I pass that user information to where the user details are set when exporting the App function.

I can already get all my user information, just not sure how I am supposed to pass the user information. I feel like I am taking the wrong approach here but am not too sure exactly how to go about this.

import React from 'react';
import './App.css';
import { withLDProvider } from 'launchdarkly-react-client-sdk';
import HelloWorld from './HelloWorld';

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

  // Let's say for example that I asynchronously get my
  // user information here and use hooks to set the user

  return (
    <div className="App">
      <header className="App-header">
        {
           user ? <HelloWorld  />
           : <div>A login screen would go here</div>
        }
      </header>
    </div>
  );
}

export default withLDProvider({
  clientSideID: 'client_id',
  user: {
    key: 'user_key',
    name: 'User Name',
    email: 'User@email.com'
  }
})(App);
Cœur
  • 32,421
  • 21
  • 173
  • 232
B.L.Coskey
  • 225
  • 1
  • 7
  • Generally we get info about user and save it in global state. Then you have access to it in all your components. For handling global state we use libraries Redux (for mo complicated apps), Mobx. Also you can handle global state with help Context API. – Vasyl Gutnyk Sep 10 '19 at 13:34
  • So let's say that I did store it in global state instead, how do I then pull that information through in my export statement when passing user as the LD config? What would that statement look like? – B.L.Coskey Sep 10 '19 at 14:04

1 Answers1

4

Open to any better ideas, but this seems to work for now

Seems like I managed to miss the answer in the docs.

What I ended up doing was initialising LD without a user and then setting the user one level down in the hierarchy with the identify() function. It's available from the ldclient prop that is passed to any of the child components.

ldclient.identify(newUser, hash, function() {
  console.log("New user's flags available");
});
B.L.Coskey
  • 225
  • 1
  • 7