轻量简单的 Redux 框架 Retalk

轻量简单的 Redux 框架 Retalk

MIT
JavaScript 查看源码»
跨平台
2018-07-05
局长

Retalk 是一个 Redux 框架,灵巧、轻量、而智慧。它让你以异常简洁清晰的方式来书写 Redux,同时还支持 model 的异步引入与 loading state 的自动处理。

特点

  • 极简的 Redux 实践:model 中只需要书写 state 和 actions,如果你愿意。

  • 是的,只有两个 API:createStore 与 withStore(可选辅助函数),再无其它的繁杂概念。

  • 异步引入 model:() => import() 用于代码分隔,store.addModel 用于将异步引入的 model 注入 store。

  • 自动 loading 处理:只需关注核心的 state 即可。

开始

使用 yarn 安装:

yarn add retalk

或者使用 npm:

npm install retalk

第 1 步:Store

store.js

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;

model 将 statereducer [可选]actions 聚在同一个文件里。

在 actions 中,使用 this.state 获取 state,使用 this.setState 更新 state,使用 this.actionName 调用其它 action,一切都如同 React 组件中的语法一样。

其它 model 的 state、reducer、action 呢?只需加上命名空间即可,比如 this.modelName.statethis.modelName.reducerNamethis.modelName.actionName

呃... 再没了,就只有这些。

当使用 Retalk 时,Redux 的 model 如此简单清晰。

第 3 步:View

App.js

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'),
);

如果一个 action 是异步的,你可以获取到 Retalk 自动添加的一个 loading state,loading.actionName,再不用去手动添加一个又一个 loading。

只需要 3 步,一个 Retalk 示例就呈现在眼前了。

最后

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

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

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

暂无博客

返回顶部
顶部