hero

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

Get Started →

基于类的方式组织 Model

🤡👺

插件机制

🥰👏

无冲突的 ActionType

🐛🦾

易使用

🛠🔧

功能齐全

🔍📕

# 开始使用

src/index.ts

import React from 'react';
import { Dx } from '@dxjs/core';
import App from './app';
import './user.model.ts';

const DxApp = Dx.create();
ReactDOM.render(
  <DxApp>
    <App />
  </DxApp>,
  document.getElementById('root'),
);

src/user.model.ts

import { DxMoel, Dx } from '@dxjs/core';
import { Reducer, Effect } from '@dxjs/common';
import { Take, Takelatest } from '@dxjs/saga';
import services from '../services';

export interface IUserModelState {
  id: string;
  nickname: string;
}

@Dx.collect()
export default class UserModel extends DxModel<IUserModelState> {
  state = {
    id: '',
    nickname: '',
  };

  @Reducer()
  updateNickname(payload: string) {
    this.state.nickname = payload;
  }

  @Effect("name", Takelatest)
  *getUserInfo(payload: string) {
    const userInfo = yield this.$call(services.getUserInfo);
    UserModel.updateNickname(userInfo.nickname)
  }
}

src/app.ts

import React from 'react';
import { Dx } from '@dxjs/core';
import UserModel from './user.model.ts';

const mapStateToProps = state => {
  return {
    id: state.UserModel.id,
  };
};

@connect(mapStateToProps)
export default class App extends React.Component {
  componentDidMount() {
    // 返回 action, 不 dispatch
    UserModel.updateNickname('username')
  }
}

# 更多 demo

https://github.com/taixw2/dxjs/tree/master/examples