XState Router 使用教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00418/article/details/142077812

XState Router 使用教程

xstate-routerXState Router. Add routes to your XState machine.项目地址:https://gitcode.com/gh_mirrors/xs/xstate-router

1. 项目介绍

XState Router 是一个用于将路由功能集成到 XState 状态机的开源项目。它允许开发者将路由与状态机同步，使得应用的状态管理更加直观和一致。通过 XState Router，开发者可以在状态机中定义路由，并在路由变化时自动更新状态机状态，反之亦然。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 XState 和 XState Router：

npm install xstate xstate-router

创建状态机配置

定义一个包含路由信息的状态机配置：

import { createMachine } from 'xstate';
import { routerMachine } from 'xstate-router';

const machineConfig = {
  initial: 'main',
  context: {
    myValue: 0
  },
  states: {
    main: {
      meta: { path: '/' }
    },
    blog: {
      meta: { path: '/blog' }
    }
  }
};

const service = routerMachine({
  config: machineConfig,
  options: {},
  initialContext: {}
});

// 监听状态变化
service.onTransition(state => console.log(state.value));

// 监听上下文变化
service.onChange(ctx => console.log(ctx));

使用 React Hooks

如果你使用 React，可以通过 Hooks 来集成 XState Router：

import { useRouterMachine } from 'xstate-router';

const config = {
  initial: 'home',
  states: {
    home: {
      meta: { path: '/' },
      on: { NEXT: 'about' }
    },
    about: {
      meta: { path: '/about' }
    }
  }
};

const App = () => {
  const [state, send] = useRouterMachine(config);

  return (
    <div>
      <button onClick={() => send('NEXT')}>Go to About</button>
      <p>Current State: {state.value}</p>
    </div>
  );
};

3. 应用案例和最佳实践

案例1：单页应用（SPA）路由管理

在单页应用中，路由管理是至关重要的。使用 XState Router 可以轻松地将路由与应用状态同步，确保用户在不同页面之间的切换不会丢失状态。

案例2：条件路由保护

有时，你可能希望根据某些条件保护某些路由，例如用户认证。XState Router 允许你在状态机中定义这些条件，并在用户尝试访问受保护的路由时自动重定向。

const protectedMachine = createMachine({
  initial: 'home',
  states: {
    home: {
      meta: { path: '/' },
      on: { NEXT: 'dashboard' }
    },
    dashboard: {
      meta: { path: '/dashboard' },
      entry: ['checkAuth'],
      on: {
        UNAUTHORIZED: 'login'
      }
    },
    login: {
      meta: { path: '/login' }
    }
  }
}, {
  actions: {
    checkAuth: (ctx) => {
      if (!ctx.isAuthenticated) {
        send('UNAUTHORIZED');
      }
    }
  }
});