Retalk 3.0，让最简单的 Redux 更简单一点

[nanxiaobei]

Retalk，最简单的 Redux 解决方案，可以更简单一点吗？

Retalk 3.0，现在 —— 像写 React 一样来写 Redux。

---

GitHub

https://github.com/nanxiaobei/retalk

特性

• 极简 Redux - 与 React 组件相同的语法。
• 只有 3 个 API - setStore()、withStore()、<Provider>。
• 异步 model - 对 model 进行代码分割的完整支持。
• 自动 loading - 自动生成异步 action 的 loading state。

安装

yarn add retalk

或

npm install retalk

使用

1. Models

通常我们会在 app 内设置多个路由，一个路由对应一个 model，所以将会有多个 model。

像写一个 React 组件一样来写 model，只是没有了生命周期而已。

class CounterModel {
  state = {
    count: 0,
  };
  increment() {
    // this.state -> 获取自身 model 的 state
    // this.setState() -> 更新自身 model 的 state
    // this.someAction() -> 调用自身 model 的 action

    // this.models.someModel.state -> 获取其它 model 的 state
    // this.models.someModel.someAction() -> 调用其它 model 的 action

    const { count } = this.state;
    this.setState({ count: count + 1 });
  }
  async incrementAsync() {
    // 自动生成的 `someAsyncAction.loading` state 可供使用

    await new Promise((resolve) => setTimeout(resolve, 1000));
    this.increment();
  }
}

2. Store

使用 setStore() 来初始化所有 model 与其命名空间。

import { setStore } from 'retalk';

const store = setStore({
  counter: CounterModel,
  // 其它 model...
});

3. Views

使用 withStore() 来连接 model 与组件。

import React from 'react';
import { withStore } from 'retalk';

const Counter = ({ count, increment, incrementAsync }) => (
  <div>
    <p>{count}</p>
    <button onClick={increment}>+</button>
    <button onClick={incrementAsync}>+ Async{incrementAsync.loading && '...'}</button>
  </div>
);

const CounterWrapper = withStore('counter')(Counter);

4. App

使用 <Provider> 来将 store 提供给 app。

import ReactDOM from 'react-dom';
import { Provider } from 'retalk';

const App = () => (
  <Provider store={store}>
    <CounterWrapper />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('root'));

示例

https://codesandbox.io/s/retalk-5l9mqnzvx?fontsize=14

API

1. setStore()

2. withStore()

3. <Provider>

查看文档：https://github.com/nanxiaobei/retalk/blob/master/README.zh-CN.md#api

FAQ

1. 异步引入 model ？

2. 自定义 state 与 action ？

3. 支持热更新？

查看文档：https://github.com/nanxiaobei/retalk/blob/master/README.zh-CN.md#faq

从 v2 升级到 v3

如果你已经使用过 Retalk 2.0，可根据文档升级到 3.0，一切都非常简单。^_^

查看文档：https://github.com/nanxiaobei/retalk/blob/master/README.zh-CN.md#%E4%BB%8E-v2-%E5%8D%87%E7%BA%A7%E5%88%B0-v3

最后

最简单的 Redux 开发体验，欢迎尝试：

https://github.com/nanxiaobei/retalk

定不负所望~ ⚡️

[danube533]

还以为螃蟹声卡发布新驱动了

[pangwa]

@danube533 你不是一个人……

[nekolr]

哈哈 不是一个人

[cococoder]

想知道除了简洁，跟 redux 的区别在哪，具体应用场景是否有不同

[chairuosen]

直接调 promise 方法，跟我们实践差不多，省了写 action 了。这个自动加 incrementAsync.loading 有意思

[moonrailgun]

想起了 dva。

[shadeofgod]

（ 9012 年了怎么还没 hook api

[nanxiaobei]

@cococoder 在 Redux 之上的封装，实现还是 Redux

[nanxiaobei]

@shadeofgod 有的有的 https://github.com/nanxiaobei/flooks

[shadeofgod]

@nanxiaobei 我的意思是这个基于 redux 的方案提供 hook api，看了下 withStore 都直接用的 react-redux 了，不如把它的 hook api 也搬过来。而且既然是基于 redux 的可以考虑下提供接口复用 redux 生态，比如可以使用 redux-persist 这类 middleware