V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
forsigner
V2EX  ›  JavaScript

简洁的 React 状态管理库 - Stamen

  •  
  •   forsigner · 2018-10-01 10:05:49 +08:00 · 4603 次点击
    这是一个创建于 2224 天前的主题,其中的信息可能已经有所发展或是发生改变。

    说到 React 状态管理,必提的肯定是 Redux 与 MobX,2018 年快过去了,它们依然是最火热的状态管理工具,也有一些基于 Redux 的,如 dva、rematch 等,也有新的,如 mobx-state-tree,这里不对各个解决方案作评价。

    但还是想吐槽:

    什么 provider, connections, actions, reducers, effects, dispatch, put, call, payload, @observable, @computed, @observer, @inject...

    一堆模板代码、各种概念、什么哲学原则... 还有各种多如牛毛的 Api。

    我只是想早点码完页面下班,早点下班健身、陪妹子...

    所以,我想要这样的一个状态管理库:

    • 轻量 个人做移动端开发比较多
    • 简洁 没模板代码, 尽量少的 Api
    • 符合直觉 没复杂的概念, 给个 action 改 state 就好
    • 清晰 更易写出可维护和可读性好的代码
    • 高效 更高的开发效率,这很重要
    • Typescript state 和 action 高度支持智能提示

    我是个实用主义者开发效率代码可维护性和可读性开发体验大于各种什么范式、各种理论,也不需要装纯,重要的是可以快速处理业务,产生价值,早点下班打王者。

    有一天,我看到了 mobx 作者的 immer, 我感觉使用 immer, 可以实现一个我理想中的状态管理工具,所以就造了一个轮子,叫 stamen, 他有什么特点呢,Show you the code: stamen

    如果有什么核心特点的话,那应该是 "简洁",这里指的是使用者写代码时简洁,可以专注于业务,而不是自身源代码简洁,把问题留给使用者。

    CodeSandbox 上的例子: Basic | Async

    用法比较简单:

    import React from 'react';
    import { render } from 'react-dom';
    import { createStore } from 'stamen';
    
    const { consume, mutate } = createStore({ count: 1 });
    
    const App = () => (
      <div>
        <span>{consume(state => state.count)}</span>
        <button onClick={() => mutate(state => state.count--)}>-</button>
        <button onClick={() => mutate(state => state.count++)}>+</button>
      </div>
    );
    
    render(<App />, document.getElementById('root'));
    

    只有 state 和 action,没有其它概念,只有一个 api:

    const { consume, mutate } = createStore({ count: 1 });
    

    Stamen 代码实现只有 40 行,对于大部分项目来说,这 40 行代码所包含的功能已然足够。

    更多用法可以看:

    12 条回复    2018-10-01 20:03:30 +08:00
    luvxy
        1
    luvxy  
       2018-10-01 10:47:17 +08:00 via iPhone
    能异步吗
    Shy07
        2
    Shy07  
       2018-10-01 11:27:10 +08:00
    自从着了 Apollo (GraphQL) 的道,好久没用 Redux 了……
    写腻了各种 action、reducer、saga,看到 { consume as query , mutate } 这么轻量的 api 就想会心一笑😉
    VDimos
        3
    VDimos  
       2018-10-01 12:12:54 +08:00 via Android
    我用的是自己写的,响应式状态管理
    will0404
        4
    will0404  
       2018-10-01 13:13:39 +08:00 via iPhone   ❤️ 1
    我的 react 状态管理:{}
    SEARCHINGFREE
        5
    SEARCHINGFREE  
       2018-10-01 13:42:26 +08:00 via iPhone
    没人说学不动吗😏
    NickCarter
        6
    NickCarter  
       2018-10-01 14:44:43 +08:00 via iPhone
    学不动了 #(滑🐔)
    damonzhaofei
        7
    damonzhaofei  
       2018-10-01 15:02:34 +08:00
    组件间通信,怎么办?
    drydiy
        8
    drydiy  
       2018-10-01 15:09:56 +08:00
    真的学不动了啊。
    murolq
        9
    murolq  
       2018-10-01 15:17:39 +08:00
    http://vanilla-js.com/ 这个框架更简洁 笑)
    beginor
        10
    beginor  
       2018-10-01 17:53:12 +08:00 via Android
    是持久化的么?比如客户端路由到其它页面再回来,或者刷新浏览器,还能保持原来的值么?
    SEARCHINGFREE
        11
    SEARCHINGFREE  
       2018-10-01 18:28:45 +08:00 via iPhone
    大佬有性能对比吗,想说一句真香
    calpamomo
        12
    calpamomo  
       2018-10-01 20:03:30 +08:00
    Benchmark?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2527 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:21 · PVG 18:21 · LAX 03:21 · JFK 06:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.