xstate-demo.ts

import { createStore } from "Redux";

const LOGGED_OUT = "LOGGED_OUT";
const LOGGING_IN = "LOGGING_IN";
const LOGGED_IN = "LOGGED_IN";
type AuthState = typeof LOGGED_OUT | typeof LOGGING_IN | typeof LOGGED_IN;

interface IUser {
  username: string;
  token: string;
  exp: Date;
}

interface IAuthStoreContext {
  message: string;
  user: IUser;
}

interface IAuthStore extends IAuthStoreContext {
  authState: AuthState;
}

const LOGIN_ATTEMPT = "LOGIN_ATTEMPT";
const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGIN_FAILURE = "LOGIN_FAILURE";
const LOGOUT = "LOGOUT";

interface LoginAttemptAction {
  type: typeof LOGIN_ATTEMPT;
  payload: {
    authState: typeof LOGGING_IN;
    message: string;
    user: IUser;
  };
}

interface LoginSuccessAction {
  type: typeof LOGIN_SUCCESS;
  payload: {
    authState: typeof LOGGED_IN;
    message: string;
    user: IUser;
  };
}

interface LoginFailureAction {
  type: typeof LOGIN_FAILURE;
  payload: {
    authState: typeof LOGGED_OUT;
    message: string;
    user: IUser;
  };
}

interface LogoutAction {
  type: typeof LOGOUT;
  payload: {
    authState: typeof LOGGED_OUT;
    message: string;
    user: IUser;
  };
}

type AuthAction =
  | LoginAttemptAction
  | LoginSuccessAction
  | LoginFailureAction
  | LogoutAction;

function LoginAttempt(storeContext: IAuthStoreContext): IAuthStore {
  return {
    authState: LOGGING_IN,
    ...storeContext,
  };
}

function LoginSuccess(storeContext: IAuthStoreContext): IAuthStore {
  return {
    authState: LOGGED_IN,
    ...storeContext,
  };
}

function LoginFailure(storeContext: IAuthStoreContext): IAuthStore {
  return {
    authState: LOGGED_OUT,
    ...storeContext,
  };
}

function Logout(storeContext: IAuthStoreContext): IAuthStore {
  return {
    authState: LOGGED_OUT,
    ...storeContext,
  };
}

function authMachine(state: IAuthStore, action: AuthAction): IAuthStore {
  switch (action.type) {
    case LOGIN_ATTEMPT:
      return LoginAttempt(action.payload);
    case LOGIN_SUCCESS:
      return LoginSuccess(action.payload);
    case LOGIN_FAILURE:
      return LoginFailure(action.payload);
    case LOGOUT:
    default:
      return Logout(action.payload);
  }
}

const store = createStore<IAuthStore, AuthAction, unknown, unknown>(
  authMachine,
  {
    authState: LOGGED_OUT,
    message: null,
    user: null,
  }
);

store.dispatch({
  type: LOGIN_ATTEMPT,
  payload: {
    authState: LOGGING_IN,
    message: "logging in",
    user: {
      exp: new Date(),
      token: "asdfasdfasdfsdf",
      username: "asdfasdf",
    },
  },
});