Retalk，Redux 从未如此简单

简介

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

特性

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

安装

Yarn

yarn add retalk

npm

npm install retalk

示例

1. Model

// demo/model.js

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

// store.js

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

const store = createStore({
  demo,
});

export default store;

3. View

// demo/index.jsx

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

// Automatically `loading[asyncAction]` is ready to use
const Demo = ({ value，add，asyncAdd，loading }) => (
  <div>
    <h4>Value: {value}</h4>
    <button onClick={add}>+1</button>
    <button onClick={asyncAdd}>Async +1 {loading.asyncAdd ? '...' ：''}</button>
  </div>
);

export default connect(...withStore('demo'))(Demo);

文档

更新

最后

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

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

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