博客重构记录二,更加深刻的认识 redux-saga

561 阅读2分钟

昨天开始重构,不,应该说是重写整个博客。界面写得差不多了,开始去做获取数据部分的逻辑处理。
刚开始打算是按照上个当前博客的逻辑去复制黏贴一份的,可是如果这样,那除了写界面有进步之外,其余地方还是原地踏步,这样的重写有什么意义? 新博客打算使用分页数据管理,首次进入主页时只加载存在于服务器第一页的资料,后续可以通过操作加载更多资料。
我使用的是 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