@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 {}
export default connect({
data: 'user',
})(App);
export default connect({
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'),
}}
/>
);
}
}