2

I have a context.js file:

import React, {useReducer} from 'react';

export default (reducer, actions, defaultValue) => {
  const Context = React.createContext();

  const Provider = ({children}) => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider
        value={{
          state,
          ...boundActions,
        }}>
        {children}
      </Context.Provider>
    );
  };
  return {Context, Provider};
};

then i have a notifContext.js file that passes the reducer and functions to context file:

const defaultValue = {
  errorMessage: '',
  notifCount: [0],
  notifications: [],
};

const notifReducer = (state, action) => {
  switch (action.type) {
    case 'error_1':
      return {
        ...state,
        errorMessage: action.payload,
      };
    case 'clear_error_message':
      return {
        ...state,
        errorMessage: '',
      };
  }
};

export const {Provider, Context} = context(
  notifReducer,
  {
    some functions,
    ...
  },
  defaultValue,
);

In my notifications screen i want to listen for error. I am able to dispatch error but when it gets to onHidden in the useeffect, i get:

 ERROR  TypeError: notifContext.dispatch is not a function. (In 'notifContext.dispatch({
              type: 'clear_error_message'
            })', 'notifContext.dispatch' is undefined)

my Notifications screen i lisetn for error with useeffect:

import {Context as NotifContext} from '../../context/NotifContext';

const [notifContext] = useContext(NotifContext);

  useEffect(() => {
    if (notifContext?.state?.errorMessage) {
      setToast(
        Toast.show(notifContext?.state?.errorMessage, {
          duration: Toast.durations.SHORT,
          position: Toast.positions.CENTER,
          onHidden: () => notifContext?.dispatch({type: 'clear_error_message'}),
        }),
      );
    } else if (toast) {
      Toast.hide(toast);
    }
  }, [notifContext?.state?.errorMessage]);

App.js:

function App() {
  const navigation = useNavigation();
  const authContext = useContext(AuthContext);

  return (
    <SafeAreaView style={styles.root}>
      <StatusBar barStyle="light-content" />
      {authContext?.state?.user === 'true' ? <MainFlow /> : <AuthFlow />}
    </SafeAreaView>
  );
}

 export default () => {
      return (
        <AuthProvider>
          <NotifProvider>
            <NavigationContainer ref={navigationRef}>
              <App />
            </NavigationContainer>
          </NotifProvider>
        </AuthProvider>
      );
    };

in the mainflow, i have a bottombar which then has the notifications screen component.

jdez
  • 189
  • 1
  • 10

1 Answers1

0

I wasn't passing the dispatch function inside context.js

Updated:

return (
  <Context.Provider
    value={{
      state,
      {/* dispatch here */}
      dispatch,
      ...boundActions,
    }}>
  {children}
 </Context.Provider>
);
jdez
  • 189
  • 1
  • 10