阅读 1218

Retalk,Redux 从未如此简单


简介

Retalk 是 Redux 的一个最佳实践,简单、流畅而智慧。

特性

  • 极简 Redux 实践:只需要 stateactions,简洁清晰。
  • 只有两个 APIcreateStorewithStore,再无其它繁杂概念。
  • 异步引入 model:对 models 进行代码分隔的完整支持。
  • 自动 loading 处理:发送请求,接着使用自动的 loading 状态即可。

安装

Yarn

yarn add retalk复制代码

npm

npm install retalk复制代码

示例

1. Model

const model = {
  state: {
    value: 0,
  },
  actions: {
    add() {
      const { value } = this.state; // this.state -> 获取 state
      this.setState({ value: value + 1 }); // this.setState -> 更新 state
    },
    async asyncAdd() {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      this.add(); // this[actionName] -> 调用 action
    },
  },
};

export default model;复制代码

2. Store

import { createStore } from 'retalk';
import demo from './demo/model';

const store = createStore({ demo });

export default store;复制代码

3. View

import React from 'react';
import { connect } from 'react-redux';
import { withStore } from 'retalk';

const Demo = ({ value,add,asyncAdd,loading }) => (
  <>
    <h4>Value: {value}</h4>
    <button onClick={add}>+1</button>
    <button onClick={asyncAdd}>Async +1 {loading.asyncAdd ? '...' :''}</button>
  </>
);
// loading[asyncAction] -> 异步 action 的 loading 状态

export default connect(...withStore('demo'))(Demo);复制代码

只需要 3 步,一个简单的 Retalk 示例就呈现在眼前了。codesandbox.io/s/5l9mqnzvx

文档

查看 文档 了解更多详细信息。

Retalk 中使用了 Proxy,如果老版本浏览器不支持,请尝试 proxy-polyfill

更新

查看 更新日志 获取最新动态。

最后

Retalk 实现了 100% 的代码测试覆盖,欢迎尝试。

如果有什么问题和建议,欢迎提 Issues。

如果喜欢,欢迎加个 ★。

总之,尝试一下,你将体验到独一无二的全新 Redux 开发体验~


GitHub 地址github.com/nanxiaobei/…

npm 地址www.npmjs.com/package/ret…


关注下面的标签,发现更多相似文章
评论