下一代狀態管理系統 Ractor

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

npm i ractor

複製**

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

import  from
"ractor";
export
const system = new system("counter");
複製**

類似 redux 的 action，不過 ractor 需要用 class 建立它。

export
class increment {}
複製**

通俗的說，你可以把 ractor 的 store 理解為 redux 的 store。唯一的區別是，redux 的 store 內建了一套事件分發機制，ractor 的事件分發由 system 處理。

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

import  from
"./increment";
import  from
"./decrement";
import  from
"ractor";
export
class counterstore extends store<> ;
public createreceive() ))
.match(decrement, async () => this.setstate())
.build();
}}複製**

除了 class 建立 store 之外，ractor 還提供了比較簡單的建立方式createstore

import  from
"ractor"
const counterstore = createstore((state, replacestate) => )
複製**

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

在這裡注入 system

import  from "ractor-hooks"
import  from "ractor"
}複製**

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

function
counter() 
複製**

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

function
counter() 
複製**

ractor 如何讀？

ruakter

ractor 解決了什麼問題？

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

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

如何寫非同步？

非同步函式。

.match(anyaction, async () => )
})複製**

為什麼 ractor store 不是純的？

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

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

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

專欄：zhuanlan.zhihu.com/c_136750016

下一代狀態管理系統 Ractor

XR，下一代搜尋

XR，下一代搜尋

下一代作業系統的「幻想」

下一代狀態管理系統 Ractor

XR，下一代搜尋

XR，下一代搜尋

下一代作業系統的「幻想」

相關推薦