如何在 react.js 中使用 svelte store答案

【问题标题】：How to use svelte store with react.js如何在 react.js 中使用 svelte store
【发布时间】：2020-12-05 03:36:14
【问题描述】：

有没有办法在 react.js 中使用 svelte store。我真的很喜欢它的简单性以及它如何替换switchcase。这是来自 svelte doc 的示例代码。

import { writable } from 'svelte/store';

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

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

export const count = createCount();

【问题讨论】：

标签： reactjs svelte-3

【解决方案1】：

这很容易通过 React 钩子实现：

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

【讨论】：

【解决方案2】：

这确实不可行。

问题是即使它们看起来都像 JavaScript，但只有 react 是 JavaScript。 Svelte 是一种编译为 javascript 的语言。

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

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

你可以看看 react 的钩子，虽然不一样，但它有一些相似之处，你可以避免使用 redux。这是一个可能有帮助的链接https://dev.to/jesseskinner/react-hooks-vs-svelte-1i9m

或者，您应该看看 Mobx，它具有更类似于 Vuex 的架构。

【讨论】：