下一代狀態管理系統 - Ractor

huangbinjie發表於2018-12-17

 

下一代狀態管理系統 - RactorÏ

Ractor

一個基於 action 設計的狀態管理工具

 

安裝

npm i ractor
複製程式碼

快速瞭解 Ractor

Ractor 僅僅包含三個基本概念，您只需要熟悉這三樣東西就能徹底掌握 Ractor 的用法。

System

和其他庫有所區別， Ractor 的事件系統和邏輯系統是分開的，需要單獨建立。一般情況下，您只需要為你的 App 建立一個事件系統。

import { System } from "ractor";
export const system = new System("counter");
複製程式碼

Action

類似 Redux 的 action，不過 Ractor 需要用 class 建立它。

export class Increment {}
複製程式碼

Store

通俗的說，你可以把 Ractor 的 Store 理解為 Redux 的 Store。唯一的區別是，Redux 的 Store 內建了一套事件分發機制，Ractor 的事件分發由 System 處理。

Store 是個抽象類，你的業務 Store 需要繼承它並實現 createReceive 方法。Store 裡有個很方便的工具類可以幫您構建用來處理事件的 Receive 物件。

import { Increment } from "./Increment";
import { Decrement } from "./Decrement";
import { Store } from "ractor";

export class CounterStore extends Store<{ value: number }> {
  public state = { value: 1 };
  public createReceive() {
    return this.receiveBuilder()
      .match(Increment, async () => this.setState({ value: this.state.value + 1 }))
      .match(Decrement, async () => this.setState({ value: this.state.value - 1 }))
      .build();
    }
}
複製程式碼

除了 class 建立 Store 之外，Ractor 還提供了比較簡單的建立方式 createStore

import { ReceiveBuilder } from "ractor"

const CounterStore = createStore((state, replaceState) => {
  return ReceiveBuilder
    .create()
    .match(Increment, () => replaceState(state + 1))
    .match(Decrement, () => replaceState(state - 1))
    .build()
})
複製程式碼

React

我們可以用 ractor-react 也可以用 ractor-hooks 搭配 React 使用。這裡主要介紹 ractor-hooks。

Provider

在這裡注入 system

  import { Provider } from "ractor-hooks"
  import { System } from "ractor"

  function App() {
    return <Provider system={new System("app")}><Counter /></Provider>
  }
複製程式碼

useStore

輸入 Ractor Store 的子類作為引數，輸出例項化之後的狀態。

function Counter() {
  const counter = useStore(CounterStore)
  return jsx
}
複製程式碼

useSystem

輸出 Provider 注入的 system。建議直接倒入 system，不太建議使用這種方式獲取 system。

function Counter() {
  const system = useSystem(CounterStore)
  system.dispatch(new Increment)
  return jsx
}
複製程式碼

Examples

FAQ

Ractor 如何讀？

ruakter

Ractor 解決了什麼問題？

Ractor 和 Redux 一樣是基於 action 設計的一套狀態管理系統。主要是幫助 App 管理各種各樣的狀態，包括全域性的和臨時的。

為什麼稱 Ractor 為下一代狀態管理庫？

Ractor 能管理程式的所有狀態，並且有動態載入，依賴注入的能力。

如何寫非同步？

非同步函式。

.match(AnyAction, async ({url}) => {
    const user = await fetch(url)
    this.setState({user})
})
複製程式碼

為什麼 Ractor Store 不是純的？

不太建議隔離副作用，這是權衡之後的決定。不過也可以只在 Store 裡面寫純的邏輯，副作用可以交給 EffectStore 處理。這取決於你怎麼架構。

為什麼事件分發和邏輯處理要分開設計，有什麼優勢嗎？

設計之處發現 Redux 只適合儲存全域性狀態，本地狀態需要通訊需要其他庫，比如 mobx 或者 context api。事件和邏輯分開之後就能隨時註冊和解除安裝"部分"邏輯。全域性狀態和臨時狀態都能存在 Ractor 裡面，而且不需要的時候可以解除安裝它們。

其他

專欄：zhuanlan.zhihu.com/c_136750016

github: github.com/FE-Ractor/r…

相關文章