如何通过 react.js 使用 svelte store

Question

有没有办法通过 react.js 使用 svelte store。我真的很喜欢它的简单性以及它如何替换 switch case。这是来自 svelte 文档的示例代码。

import { writable } from 'svelte/store';

function createCount() {
    const { subscribe, set, update } = writable(0);

    return {
        subscribe,
        increment: () => {},
        decrement: () => {},
        reset: () => {}
    };
}

export const count = createCount();

Answer 1

不太可行

问题是，尽管它们看起来都像 JavaScript，但反应只是 javascript。 Svelte 是一种编译为 javascript.

的语言

这种区别很重要，因为您不能像使用其他 js 库那样仅将应用程序的一部分分离出来，就像使用其他 js 库一样。

也就是说，这在技术上是可行的，但不是一个好方法，原因太多无法列出，包括您必须自定义反应挂钩。

您可以研究一下 React 的钩子，尽管这不一样，但它有一些相似之处，并且您可以避免将 redux 与它一起使用。这是一个 link 可能会帮助 https://dev.to/jesseskinner/react-hooks-vs-svelte-1i9m

或者，您应该看看 Mobx，它具有更 Vuex-like 的架构。

Answer 2

这很容易 do-able 使用 React hooks:

import {useEffect, useState} from 'react';
import {get} from 'svelte/store';

const unset = Symbol();

export function useReadable(store) {
  const [value, set] = useState(unset);

  useEffect(() => store.subscribe(set), [store]);

  return value === unset ? get(store) : value;
}

export function useWritable(store) {
  const [value, set] = useState(unset);

  useEffect(() => store.subscribe(set), [store]);

  return [
    value === unset ? get(store) : value,
    store.set,
    store.update
  ];
}

编辑

在这个回答之后，我实际上把它打包了。该代码已在生产中使用。这很容易理解。 https://www.npmjs.com/package/react-use-svelte-store

如何通过 react.js 使用 svelte store

How to use svelte store with react.js

reactjs

svelte-3