Skip to content
基于redux和redux-saga的数据流框架
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
LICENSE
README.MD
index.d.ts
index.js
model.d.ts
model.js
package-lock.json
package.json
tsconfig.json
tslint.json

README.MD

@epig/luna

基于redux和redux-saga的数据流框架

API

App

创建应用

import App from '@dfxk/luna';

const app = new App({
  render: () => {
    return 'Hello world';
  },
});

app.start('#root');

model

创建model

import createModel from '@dfxk/luna/model';

export interface UsersState {
  loading: boolean;
}

const model = createModel({
  modelName: 'users',
  action: {
    simple: {},
    api: {
      users: {
        path: '/system/users',
      },
    },
  },
  reducer: ({ apiActionNames, createReducer }) => {
    return createReducer<UsersState, any>({
      [apiActionNames.users.request](state, action) {
        return {
          ...state,
          loading: true,
        };
      },
      [apiActionNames.users.success](state, action) {
        return {
          ...state,
          loading: false,
        };
      },
      [apiActionNames.users.error](state, action) {
        return {
          ...state,
          loading: false,
        };
      },
    }, {
      loading: false,
    });
  },
  sagas: () => {
    return [];
  },
});

export default model;

connect

给组件注入model

class App extends React.Component {}

/** 注入已加载model */
export default connect({
  /** data: 属性名称, user: model名称 */
  data: 'user',
})(App);

/** 注入异步model */
export default connect({
  /** data: 属性名称, user: model名称 */
  data: require('models/user'),
})(App);

useModel

给组件注入model的Hooks版本

import { useModel } from '@dfxk/luna';

export interface CounterProps {
}

export default function Counter (props: CounterProps) {
  const [ home, homeActions, dispatch ] = useModel<HomeState, typeof homeModel.actions>(require('./model'));
  return (
    <div>
      <p>{home.count}</p>
      <button onClick={() => { dispatch(homeActions.simple.addCount()); }}>add count</button>
    </div>
  );
}

useApi

网络请求的Hooks版本(会触发model的错误处理)

import { useApi } from '@dfxk/luna';

export default function User (props) {
  const { data } = useApi<any>({ path: '/getUser', data: { id: props.id } });
  return (
    <div>
      <p>{data.name}</p>
    </div>
  );
}

DynamicComponent

异步加载组件

import DynamicComponent from '@dfxk/luna/DynamicComponent';

class App extends React.Component {
  render() {
    return (
      <DynamicComponent
        model={{
          component: require('containers/User'),
        }}
      />
    );
  }
}
You can’t perform that action at this time.