Retalk，Redux 從未如此簡單

南小北發表於2018-07-02
Redux

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);複製程式碼

只需要 3 步，一個簡單的 Retalk 示例就呈現在眼前了。codesandbox.io/s/5l9mqnzvx

文件

檢視 文件 瞭解更多詳細資訊。

更新

檢視 更新日誌 獲取最新動態。

最後

Retalk 實現了 100% 的程式碼測試覆蓋，歡迎嘗試。

如果有什麼問題和建議，歡迎提 Issues。

如果喜歡，歡迎加個 ★。

總之，嘗試一下，你將體驗到獨一無二的全新 Redux 開發體驗~


GitHub 地址：github.com/nanxiaobei/…

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


相關文章