rax-dva

dva.js for rax

import { Component, createElement } from 'rax';
import dva, { connect } from '@ali/rax-dva';

const app = new dva();

const sleep = ms => new Promise(r => setTimeout(r, ms));

// 引入 model
app.model({
  namespace: 'global',
  state: {
    loading: true,
  },
  subscriptions: {
    setup({ dispatch }) {
      dispatch({
        type: 'init',
      });
    },
  },
  effects: {
    * init(_, { put }) {
      yield sleep(3000);
      yield put({
        type: 'toggleLoading',
        payload: false,
      });
    },
  },
  reducers: {
    toggleLoading: (state, { payload }) => {
      return {
        ...state,
        loading: payload,
      };
    },
  },
});

// @connect(({ global, dispatch }) => ({ loading: global.loading, dispatch })) // 也可以直接使用装饰器
const App = (props) => { // 纯函数
  const { loading } = props;
  return (
    <div>{ loading ? 'Loading' : 'Hello world' }</div>
  );
};

const ConnectedApp = connect(({
  global,
  dispatch,
}) => {
  return {
    loading: global.loading,
    dispatch,
  };
})(App);

// 设置路由，目前不支持路由功能，只是模拟此写法
app.router(() => <ConnectedApp />);
app.start();