React Native中使用XState useInterpret时异步参数等待问题

问题分析 #

用AsyncStorage（异步存储）替代教程中的localStorage（同步存储）时，无法在useInterpret钩子的配置中直接使用await获取初始状态；改用.then链式调用又会触发React钩子的条件渲染错误（钩子不能在条件、循环逻辑中调用）。

解决方案 #

方法1：手动异步重hydrate状态 #

先以机器默认初始状态启动服务，组件挂载后通过useEffect异步读取持久化状态，再更新服务实例的状态。

修改后的完整代码：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { createMachine } from 'xstate';
import { createContext, useEffect } from 'react';
import { InterpreterFrom } from 'xstate';
import { useInterpret } from '@xstate/react';

export const promiseMachine = createMachine({
  id: 'promise',
  initial: 'pending',
  states: {
    pending: {
      on: {
        RESOLVE: { target: 'resolved' },
        REJECT: { target: 'rejected' },
      },
    },
    resolved: {},
    rejected: {},
  },
  tsTypes: {} as import('./useGlobalMachine.typegen').Typegen0,
  schema: {
    events: {} as { type: 'RESOLVE' } | { type: 'REJECT' },
  },
  predictableActionArguments: true,
});

export const GlobalStateContext = createContext({
  promiseService: {} as InterpreterFrom<typeof promiseMachine>,
});

const PERSISTANCE_KEY = 'test_key';

export const GlobalStateProvider = (props) => {
  // 先以初始状态启动服务
  const promiseService = useInterpret(
    promiseMachine,
    {},
    (state) => AsyncStorage.setItem(PERSISTANCE_KEY, JSON.stringify(state))
  );

  useEffect(() => {
    const rehydrateState = async () => {
      const savedState = await AsyncStorage.getItem(PERSISTANCE_KEY);
      if (savedState) {
        const parsedState = JSON.parse(savedState);
        // 更新服务状态
        promiseService.setState(parsedState);
      }
    };

    rehydrateState();
  }, [promiseService]);

  return (
    <GlobalStateContext.Provider value={{ promiseService }}>
      {props.children}
    </GlobalStateContext.Provider>
  );
};

方法2：使用XState官方持久化插件 #

XState提供@xstate/persist包专门处理异步状态持久化，无需手动编写复杂逻辑：

1. 安装依赖：

npm install @xstate/persist
# 或
yarn add @xstate/persist

2. 修改代码实现：

import AsyncStorage from '@react-native-async-storage/async-storage';
import { createMachine } from 'xstate';
import { createContext } from 'react';
import { InterpreterFrom } from 'xstate';
import { useInterpret } from '@xstate/react';
import { persist } from '@xstate/persist';

export const promiseMachine = createMachine({
  id: 'promise',
  initial: 'pending',
  states: {
    pending: {
      on: {
        RESOLVE: { target: 'resolved' },
        REJECT: { target: 'rejected' },
      },
    },
    resolved: {},
    rejected: {},
  },
  tsTypes: {} as import('./useGlobalMachine.typegen').Typegen0,
  schema: {
    events: {} as { type: 'RESOLVE' } | { type: 'REJECT' },
  },
  predictableActionArguments: true,
});

export const GlobalStateContext = createContext({
  promiseService: {} as InterpreterFrom<typeof promiseMachine>,
});

const PERSISTANCE_KEY = 'test_key';

// 配置持久化插件
const persistPlugin = persist({
  key: PERSISTANCE_KEY,
  storage: {
    getItem: (key) => AsyncStorage.getItem(key),
    setItem: (key, value) => AsyncStorage.setItem(key, value),
  },
});

export const GlobalStateProvider = (props) => {
  const promiseService = useInterpret(
    promiseMachine,
    { plugins: [persistPlugin] }
  );

  return (
    <GlobalStateContext.Provider value={{ promiseService }}>
      {props.children}
    </GlobalStateContext.Provider>
  );
};

说明 #

• 方法1通过useEffect规避了钩子中使用异步代码的限制，完全手动控制状态重hydrate流程，适合需要自定义逻辑的场景。
• 方法2使用官方插件，自动处理状态的持久化与恢复，代码更简洁，是推荐的标准解决方案。

内容的提问来源于stack exchange，提问作者Antio