react-sweet-state如何在组件外部调用dispatch action？

方案1：使用Store自带的run方法（适用于全局单例store场景） #

react-sweet-state 提供的Store实例自带run方法，可直接在组件外部执行定义好的action，无需依赖Hook调用，是官方支持的最简实现方式。
完整代码示例：

import { createStore, createSubscriber, createHook } from 'react-sweet-state';
const Store = createStore({
  initialState: {
    count: 0,
  },
actions: {
  increment: () => ({ setState, getState }) => {
    setState({
      count: getState().count + 1,
    });
  },
 },
});

const useCounter = createHook(Store);

// 导出外部可直接调用的action方法
export const increment = () => Store.run(Store.actions.increment());
// 也可以批量导出所有actions
export const counterExternalActions = {
  increment: () => Store.run(Store.actions.increment())
}

export default useCounter;

外部调用方式：

// 任意非组件文件中
import { increment } from './你的store文件路径';
// 直接调用即可修改store状态
increment();

方案2：全局挂载action引用（适用于多scope隔离的store场景） #

如果你使用<Container scope="自定义标识"隔离了多个同类型store实例，方案1的run方法只会操作全局默认单例，此时可以通过在根组件挂载action引用的方式实现外部调用：

1. 先创建全局存储action的变量：

// src/utils/counterActionRef.js
export const counterActionRef = {
  increment: null
};

2. 在用到对应scope store的根组件中，将Hook返回的actions赋值给全局变量：

import { useEffect } from 'react';
import useCounter from './你的store文件路径';
import { counterActionRef } from 'src/utils/counterActionRef';
import { Container } from 'react-sweet-state';

function CounterModuleRoot() {
  const [, actions] = useCounter();
  useEffect(() => {
    counterActionRef.increment = actions.increment;
    // 组件卸载时清空引用避免内存泄漏
    return () => counterActionRef.increment = null;
  }, [actions]);

  return <div>
    {/* 你的业务组件 */}
  </div>
}

// 外层用Container隔离scope示例
function App() {
  return <Container scope="counter-1" store={Store}>
    <CounterModuleRoot />
  </Container>
}

3. 外部调用方式：

import { counterActionRef } from 'src/utils/counterActionRef';
// 调用前先判断引用是否存在，避免组件未挂载时调用报错
if (counterActionRef.increment) {
  counterActionRef.increment();
}

注意事项 #

• 方案1仅适用于未自定义scope的全局单例store，状态和所有组件内调用useCounter返回的状态完全同步
• 方案2适配多实例场景，调用前需确保对应scope的store组件已挂载，否则action引用为空

内容的提问来源于stack exchange，提问作者Lam Nguyen Hong