昨天开始重构,不,应该说是重写整个博客。界面写得差不多了,开始去做获取数据部分的逻辑处理。
刚开始打算是按照上个当前博客的逻辑去复制黏贴一份的,可是如果这样,那除了写界面有进步之外,其余地方还是原地踏步,这样的重写有什么意义?
新博客打算使用分页数据管理,首次进入主页时只加载存在于服务器第一页的资料,后续可以通过操作加载更多资料。
我使用的是 redux-saga
管理异步逻辑的请求,之前写当前博客的时候,由于数据服务器中数据不多,不需要传递参数,数据库返回全部参数都行了。
到了现在,我最近博客更新频率保持在每日一篇左右,很快只在首页请求一次数据时不够的,还需要加载更多新的数据。
- 需求:加载更多数据
- 实现
api
中传递请求的数据的页数page
,请求数据的限制limit
,以对象方式传入
// 获取所有文章 page:当前请求数据在服务器中的页数 limit:每次发送请求一共请求多少数据
export const fetchArticles = ({page=1,limit=10}:queryDataType) => {
return Axios.get('/api/articles', {
params: {
page,limit
}
})
}
action
中定义请求的方法
export function fetchRequest(action:fetchRequestAction): ArticleAction {
return {
type: FETCH_REQUEST,
payload:action.payload
}
}
- 组件派发 在
componentDidMount
中派发action
async componentDidMount() {
await this.props.fetchRequest({
type: FETCH_REQUEST,
payload: {
page: 1,
limit:20
}})
}
redux-saga
中 takeEvery 函数捕获type: FETCH_REQUEST
行为标识,调用对应的getArticle
函数
function* watchFetchRequest() {
yield takeEvery(FETCH_REQUEST, getArticles)
}
getArticle
函数处理逻辑function* getArticles(action:fetchRequestAction) { try { /* 指明 action 是发起数据请求的类型,该类型定义如下 export interface fetchRequestAction extends Action { type: FETCH_REQUEST payload: { page: number limit:number } } */ // 根据上面componentDidMount中写的数据, payload= {page:1,limit:20} // api 中的 fetchArticles 方法接收的也是同样格式的数据,使用 call 方法发起请求 const res = yield call(fetchArticles, payload) res.error ? yield put(fetchError(res.error)) : yield put(fetchSuccess(res.data.data.items)) } catch (e) { let errorResult = e instanceof Error && e.stack ? e.stack : '不知名错误' yield put(fetchError(errorResult)) } }
以上就是我今天的最大收获,了,基本上大致上的明白了 redux-saga
的工作流程
找工作中,广州地区求一份初级前端程序员工作。手机/微信同号 13416179124. 邮箱:264589826@qq.com