V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
nanxiaobei
V2EX  ›  分享创造

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

  •  
  •   nanxiaobei ·
    nanxiaobei · 2019-11-11 13:42:30 +08:00 · 3902 次点击
    这是一个创建于 1820 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

    定不负所望~ ⚡️

    10 条回复    2019-11-19 00:25:23 +08:00
    danube533
        1
    danube533  
       2019-11-11 16:43:11 +08:00   ❤️ 1
    还以为螃蟹声卡发布新驱动了
    pangwa
        2
    pangwa  
       2019-11-11 17:43:47 +08:00 via iPhone
    @danube533 你不是一个人……
    nekolr
        3
    nekolr  
       2019-11-11 18:36:49 +08:00 via Android
    哈哈 不是一个人
    cococoder
        4
    cococoder  
       2019-11-12 10:35:37 +08:00
    想知道除了简洁,跟 redux 的区别在哪,具体应用场景是否有不同
    chairuosen
        5
    chairuosen  
       2019-11-12 11:56:23 +08:00
    直接调 promise 方法,跟我们实践差不多,省了写 action 了。这个自动加 incrementAsync.loading 有意思
    moonrailgun
        6
    moonrailgun  
       2019-11-12 18:03:10 +08:00
    想起了 dva。
    shadeofgod
        7
    shadeofgod  
       2019-11-14 11:16:21 +08:00
    ( 9012 年了怎么还没 hook api
    nanxiaobei
        8
    nanxiaobei  
    OP
       2019-11-18 20:49:43 +08:00
    @cococoder 在 Redux 之上的封装,实现还是 Redux
    nanxiaobei
        9
    nanxiaobei  
    OP
       2019-11-18 20:50:08 +08:00
    shadeofgod
        10
    shadeofgod  
       2019-11-19 00:25:23 +08:00
    @nanxiaobei 我的意思是这个基于 redux 的方案提供 hook api,看了下 withStore 都直接用的 react-redux 了,不如把它的 hook api 也搬过来。而且既然是基于 redux 的可以考虑下提供接口复用 redux 生态,比如可以使用 redux-persist 这类 middleware
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5651 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 03:41 · PVG 11:41 · LAX 19:41 · JFK 22:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.