I`m learning React Native with Typescript. I'm currently trying to consume Context from components far down the "component tree" using useReducer funtion. The reducer seems to be working fine, returning the expected value, however the context doesn't update at all.I've been following a course, and this exact code seems to work for the teacher. I have no idea where my error might be.
here's my code:
AuthContext.tsx
export interface AuthState { isLoggedIn: boolean; userName?: string; favoriteIcon?: string;}const authInit: AuthState = { isLoggedIn: false,};export interface AuthContextProps { authState: AuthState; signIn: () => void;}export const AuthContext = createContext({} as AuthContextProps);export const AuthProvider = ({ children,}: { children: JSX.Element | JSX.Element[];}) => { const [authState, dispatch] = useReducer(authReducer, authInit); const signIn = () => { dispatch({type: 'signIn'}); }; return (<AuthContext.Provider value={{ authState: authInit, signIn, }}> {children}</AuthContext.Provider> );};
AuthReducer.tsx
interface AuthAction { type: 'signIn';}export function authReducer(state: AuthState, action: AuthAction): AuthState { switch (action.type) { case 'signIn': let newstate = { ...state, isLoggedIn: true, userName: 'marrkoz', }; //this console.log is running okay console.log(newstate); return newstate; break; default: return state; }}
App.jsx
const App = () => { return (<NavigationContainer><AppState><BottomTabsNavigator /></AppState></NavigationContainer> );};// i dont understand why this wrapper is necesary...const AppState = ({children}: {children: JSX.Element | JSX.Element[]}) => { return <AuthProvider>{children}</AuthProvider>;};export default App;
Here i try consuming the console button logs '{isLoggedIn: false}' every single time.the component hierarchy is the following App > BottomTabNavigator > TopTabNavigator > Contacts.tsx
Contacts.tsx
export const Contacts = () => { const {authState, signIn} = useContext(AuthContext); return (<><View><Text>Contacts</Text></View><View style={styles.m20}><Button title={'sign in'} onPress={signIn} /><Button title={'console'} onPress={() => { console.log(JSON.stringify(authState)); }} /></View></> );};
My only guess is that the reducer return value is somehow not linked with the context, therefore context is not "adopting" the new state as the current one. If thats the case, i have no idea how to solve it