主要流程
1.查看接口文档：
2.根据接口文档的参数编写services
export function fetchUserOperator({page,page_rows,name,username}) {
return request('/api/admin/sports/Operator/getOperatorUserList', {
method: 'POST',
body: JSON.stringify({
page,
page_rows,
name,
username
}),
/**请求头,有请求参数时要加(不同后端不同请求头) */
headers: {
'Content-Type': 'application/json'
}
});
}
3.根据接口文档返回的数据编写models
接口文档返回的数据示例：
编写models：
import * as operatorServices from '../services/operator';
/**将services里面的全部请求函数作为引入到该文件中*/
export default {
/**同一个命名空间下可以有很多数据 */
namespace: 'operator',
state: {
userOpeList:{},
},
effects: {
/**effects里面也可以有很多方法*/
*fetchUserOperator({ payload }, { call, put }) {
const {data} = yield call(operatorServices.fetchUserOperator, payload);
if(data && data.code === 200) {
yield put({
type: 'save',
payload: {
userOpeList: data.info
}
});
}
},
},
reducers: {
save(state, action) {
return { ...state, ...action.payload };
},
},
};
在index.js中引入该model文件
4.编写组件
把store中的数据与组件connect起来，
export default connect((state)=>{
return{
userOpeList:state.operator.userOpeList
/**命名空间operator下的userOpeList数据 */
}
})(AddOperator);
组件触发动作：
componentDidMount() {
this.props.dispatch({
type:'operator/fetchUserOperator',
/**model中,命名空间operator下的effects里面的fetchUserOperator方法 */
payload:{
page:1,
page_rows:PAGE_SIZE,
}
})
}
