或许你不需要 Redux？来尝试下轻量级的状态共享 Hook 库吧

#1

GitHub 仓库：https://github.com/nekocode/use-shared-state

特点:

  • 轻量级，比 redux 简单，可以在库工程里使用
  • 体积小，压缩后小于 1000 字节
  • 最小范围的重新渲染。例如下图 b 和 e 共享 state，当 state 值变化时只重新渲染 b 和 e：
  a
+-+-+
| | |
b c d
    |
    e
  • 允许在 state 值指定字段发生变化时才重新渲染组件：
// 获取共享的 state，且在 age 字段发生变化时才更新被 hook 的组件
const state= useSharedState<User>(UserContext, (current, prev) => current?.age !== prev?.age);
#2

看了下，挺好的，楼主也可以试试concent方案， https://github.com/concentjs/concent，看看是不是你的菜啊

#3

这个看起来复杂度（至少学习复杂度）不比 Redux 低啊，或许它有特别适用的场景，不过应该不是我的菜 hhhhh

#4

不要慌大兄弟，了解下这篇文章哦，就知道很简单了
https://juejin.im/post/5eda2a0ef265da76fa4b6c03

0入侵接入，无感知使用。

import { run, register, useConcent } from "concent";

run({
  counter: {// 声明一个counter模块
    state: { num: 1 }, // 定义状态
  }
});

@register("counter")
class ClsComp extends React.Component {
  changeNum = () => this.setState({ num: 10 })
  render() {
    return (
      <div>
        <h1>class comp: {this.state.num}</h1>
        <button onClick={this.changeNum}>changeNum</button>
      </div>
    );
  }
}

function FnComp() {
  const { state, setState } = useConcent("counter");
  const changeNum = () => setState({ num: 20 });
  
  return (
    <div>
      <h1>fn comp: {state.num}</h1>
      <button onClick={changeNum}>changeNum</button>
    </div>
  );
}

还见过比它更简单的数据流方案吗:grinning:
在线示例 https://codesandbox.io/s/rvc-demo2-vg3uh?file=/src/index.js