H5项目使用dva-reducer来做到拉动加载数据

本文基于dva和ant-design-mobile的PullToRefresh组件来讲解移动端H5滑动刷新

• 本文适用于刚接触redux或dva的初学者，致力于帮助他们快速解决问题，理解redux原理的读者可以跳过

移动端拉动加载数据

其实也就是分页，不同于pc端的话可能就是需要把上一页的请求数据和这一页的拼接起来

• 上代码 /list.js

<PullToRefresh
          damping={60}
          direction='up'
          onRefresh={() => {
            this.setState({
              refreshing: true,
              pageNum: this.state.pageNum += 1
            }, () => {
              this.getlist()
            });
          }}
        >
        // 实现获得到数据后的列表   或者是空
        </PullToRefresh>

• 记得要@connect哦。
• pageNum初始1 拉一次加1一次 很好理解吧我们来看getlist()部分

getlist()内 我们需要去dispatch获得列表数据的那个action（action概念可以去看下redux）

getlist() {
    dispatch({
      type: 'orderlist/waiting_delivery',
      payload: {
          orderStatus: id,
          pageNum: this.state.pageNum, //请求的页码
          pageSize: 5 //每次返回多少条
      }
    });
  }

• 然后我们看下models的waiting_delivery

export default {
  namespace: 'orderlist',
  effects: {
    *waiting_delivery({ payload, callback }, { call, put }) {
      const response = yield call(reg, payload);
      yield put({
        type: 'waitingDelivery',
        payload: response
      });
      if (response) {
        callback(response);
      }
    },
  },
  reducers: {
   waitingDelivery(state, { payload:{data} }) {
      if (data.current > 1) {  //这个判断得看你们自己的返回数据的结构
        data.records = state.waitingDelivery.records.concat(data.records)  //拼接上一页数据，其实就是拼接保存在redux的store里的上一次请求的数据
        return { ...state, waitingDelivery:{...data}}  //最后就是用扩展运算符去接收咯
      } else {
        return { ...state, waitingDelivery:{...data}}
      }
    },
  }
}

• if (data.current > 1) 这个判断得看你们自己的返回数据的结构
• data.records = state.waitingDelivery.records.concat(data.records) 拼接上一页数据，其实就是拼接保存在redux的store里的上一次请求的数据
• return { ...state, waitingDelivery:{...data}} //最后就是用扩展运算符去接收咯

打完收工，写的比较简单，内容也比较陈芝麻烂谷子，希望能帮到有需要的读者吧！有问题可以在评论区留言！