the simple demo of dva and antd
npm install
npm start
dva2.x的简单小demo,包括增删改查
the simple demo of dva and antd
npm install
npm start
在 dva1.x 中,组件的 的监听函数写法如下:
function pageChangeHandler(page) {
dispatch(routerRedux.push({
pathname: '/users',
query: { page },
}));
}
然后在 model 中的监听中可以如下面形式进行获取:
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname, query }) => {
if (pathname === '/users') {
dispatch({ type: 'fetch', payload: query });
}
});
},
},
但是在2.x中,history的 location 属性上不再包含 query, 需要 query-string 处理一遍。并且要把参数传到 location 中的 search 字段中,例子如下:
function pageChangeHandle(page) {
dispatch(
routerRedux.push({
pathname: "/user",
search: "?page=" + page
})
);
}
model 中的监听如下:
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname, search }) => {
const query = queryString.parse(history.location.search)
if (pathname === "/user") {
dispatch({
type: "fetch",
payload: query ? query : 1
});
}
});
}
}
在 dva 项目中,根目录的index.js
代码如下所示:
import dva from 'dva';
import './index.css';
// 1. Initialize
const app = dva();
// 2. Plugins
// app.use({});
// 3. Model
app.model(require('./models/user'));
// 4. Router
app.router(require('./router').default);
// 5. Start
app.start('#root');
会报错,如下:
改成如下即可:
import dva from 'dva';
import './index.css';
import UserModel from './models/user'
// 1. Initialize
const app = dva();
// 2. Plugins
// app.use({});
// 3. Model
app.model(UserModel);
// 4. Router
app.router(require('./router').default);
// 5. Start
app.start('#root');
在 dva 项目中,model 是针对页面级的状态和 actions 的聚合。如果我想在页面在去请求数据的时候显示 loading 状态(即页面出现蒙层,不允许用户进行点击)可以使用如下方式进行实现:
安装 dva-loading库
在 index.js 中加入 dva-loading 插件:
import dva from 'dva';
import './index.css';
import UserModel from './models/user';
import createLoading from 'dva-loading'; //引入插件
// 1. Initialize
const app = dva();
// 2. Plugins
app.use(createLoading()); //使用插件
// 3. Model
app.model(UserModel);
// 4. Router
app.router(require('./router').default);
// 5. Start
app.start('#root');
在页面中添加 loading 状态:
function mapStateToProps(state) {
const { list, total, page } = state.user;
console.log(state)
return {
loading: state.loading.models.user,
list,
total,
page
};
}
export default connect(mapStateToProps)(User);
可以从 state 中去获取每个页面级 model 的 loading 状态,然后将 loading 作为 props 传入子组件即可
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.