推荐开源项目：Lux.js - 照亮React的光芒-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00023/article/details/139980765

推荐开源项目：Lux.js - 照亮React的光芒

项目简介

Lux.js 是一款基于 Flux 架构实现的库，它集成了 ReactJS、postal.js 和 machina.js，旨在提供一种高度解耦的组件、调度器和存储的方案。它的核心设计理念包括：

组件通过 luxWrapper 作为与存储交互的代理。
利用 lux 的 dispatch 方法生成的消息负载会传递给 Dispatcher 进行协调处理。
存储操作是同步的。
存储状态不直接修改，只能在存储的动作处理器中更新状态。
其他模块可以依赖存储进行只读操作。
一旦所有参与动作处理的商店完成任务，Dispatcher 会发送消息通知可以更新。
组件更新由 Dispatcher 控制，仅接收相关商店的更新。
所有通信通过消息传递完成。
每个消息负载应可完全序列化。

使用示例

以下是一个简单的例子，展示了一个单一的存储和一个 lux 包装的组件。在线体验此示例。

store.js

import { Store } from "lux.js";

export default new Store({
  namespace: "light",
  state: {
    light: "off"
  },
  handlers: {
    "toggleLight"() {
      const { light } = this.getState();
      this.setState({
        light: light === "off" ? "on" : "off"
      });
    }
  },
  getLightStatus() {
    return this.getState().light;
  }
});

LightMode.js

import React from "react";
import { luxWrapper, dispatch } from "lux.js";
import lightStore from "./store";

function LightMode({ lightStatus, onToggleLight }) {
  return (
    <div>
      <p>
        Light Status: <b>{lightStatus}</b>
      </p>
      <div className={`light light-${lightStatus}`}>
        <i className="fa fa-lightbulb fa-3x" />
      </div>
      <button onClick={onToggleLight}>Toggle Light</button>
    </div>
  );
}

export default luxWrapper(LightMode, {
  stores: ["light"],
  getState() {
    return {
      lightStatus: lightStore.getLightStatus()
    };
  },
  actions: {
    onToggleLight() {
      dispatch("toggleLight");
    }
  }
});