Retalk，Redux 从未如此简单

简介

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

它可以让你以异常简洁清晰的方式来书写 Redux，忘掉 Action types，忘掉 Action creators，再也不用考虑庞杂而烦人的样板代码。

除此之外，Retalk 还支持异步引入页面 model（Code Splitting），以及对 loading 状态的自动处理。

特点

• ️ 极简的 Redux 实践：model 中只需要书写 state 和 actions，如果你愿意。
• 是的，只有两个 API：createStore 与 withStore（可选辅助函数），再无其它的繁杂概念。
• ️ 异步引入 model：() => import() 用于代码分隔，store.addModel 用于将异步引入的 model 注入 store。
• ⏳ 自动 loading 处理：只需关注核心的 state 即可。

开始

使用 yarn 安装：

import { createStore } from 'retalk';
import count from './count';

const store = createStore({
  count,
});

export default store;

第 2 步：Model

count.js (state, actions)

const count = {
  state: {
    count: 0,
  },
  actions: {
    add() {
      this.setState({ count: this.state.count + 1 });
    },
    async addAsync() {
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.add();
    },
  },
};

export default count;

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, connect } from 'react-redux';
import { withStore } from 'retalk';
import store from './store';

const Count = ({ loading, count, add, addAsync }) => (
  <div className={loading.addAsync ? 'loading' : 'done'}>
    The count is {count}
    <button onClick={add}>add</button>
    <button onClick={addAsync}>addAsync</button>
  </div>
);

const App = connect(...withStore('count'))(Count);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root'),
);