next-react-valtio: 基于 valtio 状态管理工具

基于 valtio 的工具

项目主页: https://github.com/afeiship/next-react-valtio

安装

yarn add derive-valtio valtio
yarn add @jswork/next-react-valtio

使用

const Login = () => {
  const initialState = {
    count: 0,
    user: { first: '', last: '', age: '' }
  };
  const { state, store, ...derived } = nx.$valtio(initialState, {
    tripled: (store) => store.count * 3,
    fullname: (store) => `${store.user.first} ${store.user.last}`
  });
  // ...
}

实战

相对完整的实际使用场景。

const Login = () => {
  const initialState = {
    count: 0,
    user: { first: '', last: '', age: '' }
  };
  
  const { state, store, ...derived } = nx.$valtio(initialState, {
    tripled: (store) => store.count * 3,
    fullname: (store) => `${store.user.first} ${store.user.last}`
  });


  console.log('login derived', derived);

  return (
    <div className="rounded-md bg-slate-100 p-4 transition-all hover:bg-slate-200">
      <h1>login</h1>
      <h2>{state.count}</h2>
      <nav className="mb-2 flex gap-2">
        <button onClick={() => (store.count += 1)}>add</button>
        <button onClick={() => (store.count -= 1)}>sub</button>
      </nav>
      <form
        className="flex flex-col gap-2"
        onSubmit={(e) => {
          e.preventDefault();
          handleLogin();
        }}>
        <input
          type="text"
          placeholder="first name"
          value={state.user.first}
          onChange={(e) => (store.user.first = e.target.value)}
        />
        <input
          type="text"
          placeholder="last name"
          value={state.user.last}
          onChange={(e) => (store.user.last = e.target.value)}
        />
        <input
          type="password"
          placeholder="password"
          value={state.user.age}
          onChange={(e) => (store.user.age = e.target.value)}
        />
        <footer className="mt-2 flex gap-2">
          <button type="submit">Login</button>
          <button
            onClick={() => {
              nx.mix(store.user, {
                name: 'aric1',
                age: 108
              });
            }}>
            RestValues
          </button>
        </footer>
      </form>
    </div>
  );
};

export default Login;