如何在React.js中使用Svelte Store

问题描述

有没有一种方法可以将svelte store与react.js一起使用。我真的很喜欢它的简单性以及如何替换switch case。这是来自svelte doc的示例代码。

import { writable } from 'svelte/store';

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

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

export const count = createCount();

解决方法

这真的不可行。

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

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

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

您可以查看一下react的钩子，即使那不相同，它也有一些相似之处，并且您可以避免使用redux。这是一个可能有助于https://dev.to/jesseskinner/react-hooks-vs-svelte-1i9m

的链接

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

这可以通过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,[store]);

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

reactjs reactjs svelte-3