一. 页面发出访问数据请求：
this.props.dispatch({
type: 'offline_tools_datamap/fetch', //model中的命名空间和方法
payload:params //参数
});
二. 页面获取数据，页面组件上方添加连接，从redux的state中读取dispatch请求到的数据
@connect(state => {
return {
list: state.offline_tools_datamap.list,
loading: state.loading,
};
})
三. models目录中和页面同名的js供页面调用（models目录可以和页面同一级目录或在页面上级目录）
import { queryDataMaps } from '@/services/api';
export default {
//不同的model最好命名空间不同，如果相同，在相同的命名空间下，effects和reducer不能有冲突
namespace: 'offline_tools_datamap',
state: {
list: []
},
//副作用，供页面调用，call用来调用外部方法，put用来发出一个redux的action
effects: {
*fetch({ payload }, { call, put }) {
//queryDataMaps是/services/api中的方法
const response = yield call(queryDataMaps, payload);
console.log(JSON.stringify(response));
yield put({
type: 'save',
payload: response,
});
},
//effects不直接操作redux state，effects调用外部方法获取到数据后，put一个action，然后在reduces中处理这个action
reducers: {
save(state, action) {
return {
...state,
list: action.payload,
};
},
};
};
四.services/api.js中定义一个异步方法用来访问外部数据
export async function queryDataMaps(params) {
return request(`/flowapi/datamaps?${stringify(params)}`);
}
五. mock文件夹中的js文件定义mock数据
export default {
//表示当处理mock状态时，如果以get方式访问/flowapi/datamaps，将调用getDataMaps方法产生mock数据
'GET /flowapi/datamaps': getDataMaps,
};
网友评论