Search code examples
reactjstypescriptexpomobx

undefined action call from userstore

3.5 and Expo version 43

we are moving an existng code file over to use in expo our user store model... having a hard time reaching the .actions items and no idea how to research this.

example code of where we are trying to use the action in

 const { userStore } = useStores()


 const onPressLogIn = async () => {
debugger
console.log("pressed login")
console.log(userStore)  //also undefined
if (validateText()) {
  setLoading(true)
  props.navigation.setParams({ noback: true })
  userStore.logInUser(email, password)
  // .then(async () => {
    //   return logInStatus
    // })
    // .catch(() => {
    //   setLoading(false)
    //   props.navigation.setParams({ noback: false })
    //   setError(userStore.friendlyLoginStatus)
    // })
}
}

Using mobx-state-tree lib for state handling and firebase Auth

async logInUser(email: string, password: string) {
      const auth = getAuth()
      signInWithEmailAndPassword(auth, email, password).then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        // ...
      })
      // await self.loginSuccess(data.user, "email")
      // return Promise.resolve()

  },

**WHERE WE IMPORT USER STORE FROM *** import { createContext, useContext } from "react" import { RootStore } from "./root-store"

const RootStoreContext = createContext<RootStore>({} as RootStore)


export const RootStoreProvider = RootStoreContext.Provider

export const useStores = () => useContext(RootStoreContext)

*** THE root-store file

import { Instance, SnapshotOut, types } from "mobx-state-tree"

import { creatMediaPlayerModel } from "../../models/media-player"
import { createUserModel } from "../../models/user"
import { createContentModel } from "../../models/content"

// /**
//  * A RootStore model.
//  */
export const RootStoreModel = types.model("RootStore").props({
mediaPlayerStore: creatMediaPlayerModel(),
userStore: createUserModel(),
contentStore: createContentModel(),
})

// /**
//  * The RootStore instance.
//  */
export type RootStore = Instance<typeof RootStoreModel>

// /**
//  * The data of a RootStore.
//  */
export type RootStoreSnapshot = SnapshotOut<typeof RootStoreModel>

Any ideas? Tips? is the whole login method wrinted wrong? debugger shows up as loginuser is undefined

enter image description here

Solution

  • Adding my comment that helped as an answer:

    You're using a context in

    useContext(RootStoreContext)

    And the behaviour you describe is what happens when the context provider is not ever setup.

    So you need to make sure that the provider is setup and is given values:

    <RootStoreContext.Provider value={{ ... }}>
  <MyComponent />
</RootStoreContext.Provider>

    And that the components that need access to that context are children of that provider.