Блог

Я работаю над машинописной версией шаблона Кента Додда для использования контекста реакции с помощью useReducer. Вы можете увидеть мою версию приложения в codesandbox.

Короче говоря, существуют пользовательские перехваты, которые предоставляют контексты для состояния и отправки. Но когда я пытаюсь их использовать, контексты возвращаются как undefined .

Вероятно, я упускаю что-то действительно очевидное в разнице между тем, что он делает, и я делаю, но я этого не вижу. Свежая пара глаз была бы отличной. Спасибо.

Поставщик и хук выглядят следующим образом

 const AuthProvider = ({ children }: ProviderProps) => {
  const [state, dispatch] = useReducer(authReducer, initialState);

  return (
    <AuthStateContext.Provider value={state}>
      <AuthDispatchContext.Provider value={dispatch}>
        {children}
      </AuthDispatchContext.Provider>
    </AuthStateContext.Provider>
  );
};

function useAuthState() {
  const context = React.useContext(AuthStateContext);
  if (context === undefined) {
    throw new Error("useAuthState needs a context");
  }
  return context;
}

function useAuthDispatch() {
  const context = React.useContext(AuthDispatchContext);
  if (context === undefined) {
    throw new Error("useAuthDispatch needs a context");
  }
  return context;
}
  

Использование хуков выглядит следующим образом.

 export default function App() {
  const dispatch = useAuthDispatch();
  const { isAuthenticated, user } = useAuthState();

  useEffect(() => {
    console.log("dispatch", dispatch);
  }, [dispatch]);

  return (
    <AuthProvider>
      <div>Authenticated: {isAuthenticated ? "true" : "false"}</div>
      <div>user: {user ? user : "not logged in yet"}</div>

      {isAuthenticated ? (
        <button onClick={() => dispatch({ type: "logout" })}>Logout</button>
      ) : (
        <button onClick={() => dispatch({ type: "login" })}>Login</button>
      )}
    </AuthProvider>
  );
}