taixw2 / dxjs

基于 redux-saga 的状态管理工具

dxjs

基于 Redux、React-Redux、Redux-saga、Typescripe 的状态管理库

Dxjs 能做什么

Dxjs 是一个 基于 redux-saga 和 typescript 的状态管理库，它在 redux-saga 的基础上新增了一些钩子，让你能够在数据流的任意阶段插入逻辑，

基础特性

• Symbol, 解决 Action Type 冲突，通过方法名换取 Action, 免去定义烦恼
• 基于 Class, 更多特性可用：私有属性、装饰器、继承
• Typescript: 减少类型错误，增强代码的鲁棒性
• 增强器: 各个阶段植入逻辑，减少模板代码

安装

npm install react-redux @dxjs/core @dxjs/common

# 采用 yarn
yarn add react-redux @dxjs/core @dxjs/common

在 taro 中安装依赖

npm install @tarojs/redux @tarojs/redux-h5

# 在 config/index.js 中设置
alias: {
  "react": require.resolve("@tarojs/taro"),
  "react-dom": require.resolve("@tarojs/taro"),
  "react-redux": require.resolve("@tarojs/redux"),
}

DxModel

export class ExampleModel extends DxModel {
  state = { count: 1 };

  @Reducer('ns/count')
  coustActionReducer(count: number): void {
    this.state.count += count;
  }

  @Reducer()
  updateCount(count: number): void {
    this.state.count += count;
  }

  @Effect('ns/asyncCount')
  *asyncUpdateCount(payload: number): Generator {
    const count = yield this.$call(delayGet, payload);
    yield this.$put((ExampleModel as DxModelContstructor).updateCount(count));
  }

  @Effect()
  *delayUpdate(payload: number): Generator {
    const count = yield this.$delay(1000, payload);
    yield this.$put((ExampleModel as DxModelContstructor).updateCount(count));
    return (count as number) + 10;
  }
}

快速开始

创建一个 Dx 实例

为了方便，create 会返回一个 React Component, 如果不想返回 Component, 可以使用 Dx.createStore

import { Dx } from "@dxjs/core"

const DxApp = Dx.create({
    models: [],
    reducerEnhancer: [],
})

创建 model

只需要继承 DxModel, 你可以通过 Dx.collect 来收集 model, 或者手动传入到 Dx.create 中

import { Dx, DxModel } from "@dxjs/core"

@Dx.collect()
class UserModel extends DxModel {}

定义 reducer 和 effect

利用装饰起 Effect 和 Reducer 来标识这是一个 effect 还是 reducer, 他们还接受一些参数

import { Dx, DxModel } from "@dxjs/core"
import { Effect, Reducer } from "@dxjs/core"

@Dx.collect()
class UserModel extends DxModel {
    @Reducer()
    update(payload) {
        return { payload }
    }

    @Effect()
    update(payload) {
        this.$call(service)
    }
}

获取Action

通过 Dx.getModels 获取到所有的 model，注意获取到的都是构造函数，只是内部把所有的 effect 和 reducer 都挂在了静态方法上，所以看起来像直接调用了实例方法一样，实际上第二个参数设为 true 会直接调用 dispatch, 否则则会返回 action

import { Dx } from "@dxjs/core"
Dx.getModels().UserModel.update("some", true)
Dx.getModels('UserModel').update("some", true)
Dx.getModels('Use').update("some", true)
Dx.getModels(/^Use/)[0].update("some", true)

开始

以上是一些基础功能，更多详细的介绍你需要更完整的查看文档：文档入口，接下来则开始准备使用吧。

example

我还为大家准备了一些简单的 example:

• sample (by create-react-app)
• sample2 (by taro)

欢迎 Star、Pull Request、Issues、补充文档

dxjs's Issues

roadmap

• model 内置 selector
• model 内置 patch
• 新增 loading plugin
• 新增 router plugin
• 命名空间