Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

useReducer integration with useContext not updating properly

$
0
0

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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>