nanxiaobei / resso Goto Github PK

类似于 mobx 中将多个修改操作放在 runInAction() 中执行，来批量更新 state 之后再触发 rerender。

看了下代码是useState
似乎不行?

hi, 遇到个问题请教下，可能是我的场景有问题，求解惑

组件多次实例化后，store也只有一个，期望组件在外部被使用时，store是独立的且不相互影响

尤其在npm包内，是当做全局状态使用的，但是发包后被多次import后，每个组件操作的是同一个store

https://codesandbox.io/p/sandbox/winter-flower-npgqwy?file=%2Fsrc%2Findex.tsx%3A23%2C40

比如常用的 devtools 与 persist 或者 resso 可以提供中间件接口好让开发者去实现

I found below snippet would not work:

import { useState } from 'react';
import resso from 'resso';

// 🪢 resso
// https://github.com/nanxiaobei/resso

const store = resso({
  count: 0,
  text: 'hello',
  inc: () => store.count++,
});

function App() {
  const [i, setI] = useState(0);

  if (i % 2 === 1) {
    return <div>i === {i}</div>;
  }

  return (
    <>
      <div>{store.count}</div>
      <button
        onClick={() => {
          store.inc();
          setI(i + 1);
        }}
      >
        inc
      </button>
    </>
  );
}

export default App;

Check codesandbox.

It will cause the error Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

We can change it a little bit as below:

import { useState } from 'react';
import resso from 'resso';

// 🪢 resso
// https://github.com/nanxiaobei/resso

const store = resso({
  count: 0,
  text: 'hello',
  inc: () => store.count++,
});

function App() {
  const { count } = store;
  const [i, setI] = useState(0);

  if (i % 2 === 1) {
    return <div>i === {i}</div>;
  }

  return (
    <>
      <div>{count}</div>
      <button
        onClick={() => {
          store.inc();
          setI(i + 1);
        }}
      >
        inc
      </button>
    </>
  );
}

export default App;

The user should eject the value from store before any of condition statement.

I suggest to put such info as notice/usage-limitation in readmd, so that users are able to avoid such issue

Where is the code design that must be deconstructed before use ？

demo里给的示例是这样的：

const store = resso({
  user: {
    info: {
      count: 0,
    }
  },
  inc: () => store.user.info.count++,
});

我尝试下面的写法，却不能正常运行：

const store = resso({
      count: 0,
  },
  inc(){ this.count++}
});

会报错：TypeError: Cannot set properties of undefined (setting 'count')

this 未定义

Demo在这里：https://codesandbox.io/s/resso-forked-1mbs58?file=/src/App.jsx
我觉得这样的场景是可能存在的，当使用resso时对象操作的层级比较深时，又想同时进行相应的视图更新的时候会比较麻烦

pinia 的 $reset 方法很好用的， 建议添加 reset 方法， 所有值返回到初始状态。

使用场景：
某些模块功能比较复杂，使用了 独立的 store, 所有子组件共享状态，当用户切换到其它模块后再次切换回来时，希望状态值回到初始化值。目前通过定义 store的时候，再写一个initStore来处理，实现起来比较繁琐，如果内部能实现就更好了。

Extremely great job.
I like your repo very much. So that I created an example for it: https://github.com/leftstick/react-resso-memory-game.

Will you put it in your readme for others as a reference? That would be nice.

Thanks for your nice work

大佬这个库确实大道至简，非常棒！
但是这个用provy代理get，实际上是执行一个hook，开发者不会把它当成是hook去注意，可能会不经意间放到条件语句里面，导致错误

就像这种情况，感觉有点美中不足😂

const store = resso({
  count: 0,
  get double() {
    return this.count * 2;
  },
});

我是这么写的，但是 double 不会更新
https://codesandbox.io/s/headless-wind-u6v73m?file=/src/App.js

真的是状态管理就只要做好状态管理的事情。。瞬间感觉recoil就不香了

尝试在 react-native 项目中使用 resso ，运行失败

在微信小程序和pc端能正常使用。

Hey,

First of all great job :)

just have a question about nested object like this one:

const store = resso({
  user: {
    info: {
      count: 0,
    }
  },
  inc: () => store.user.info.count++,
});

function Control() {
  const { inc } = store;
  return (
    <>
      <p>{store.user.info.count}</p>
      <button onClick={inc}>-</button>
    </>
  );
}

Maybe this line https://github.com/nanxiaobei/resso/blob/main/src/index.ts#L31 should be some recursive function?
I'm not so good so ... I don't have any PR or suggestions ... just try to learn :) Thanks in advance!