在 react-sweet-state 中调度组件外部的操作

Question

我知道在 redux 中，我们可以在组件之外调度一个动作，只需导入 store 并使用 store.dispatch 来调度一个动作。

我正在使用 react-sweet-state，我想在组件之外调用一个操作。由于 redux-sweet-state 使用钩子，我不能这样做。

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);

我想在组件之外调用增量。有人可以帮助解决这个问题..谢谢

Answer 1

为此，您必须导入defaultRegistry，然后在其上使用getStore。

在您的示例中，它看起来更像这样：

counter.store.ts

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);

export {useCounter, Store}; // export store variable here

some-fn.ts

import { defaultRegistry } from 'react-sweet-state'; // import those
import { Store } from './counter.store.ts';

const StoreInstance = defaultRegistry.getStore(Store); // we get access to store instance

const someFunction = () => {
  StoreInstance.actions.increment(); 
}

Answer 2

导入你的商店然后你就可以使用它的调度功能了

import { store } from '/path/to/createdStore';
    ​
    function testAction(text) {
      return {
        type: 'TEST_ACTION',
        text
      }
    }
    ​
    store.dispatch(testAction('StackOverflow'));