React中如何“加载更多”？

前提条件：

1. 假设首页文章列表放于 store 的 list 中。

---

思考步骤：

1. 经过 styled-components 建立“加载更多”按钮组件，并绑定click回调函数A。
2. 理想状态 函数A 经过 dispatch 出一个 action 异步获取数据并更新 store 中的 list 数据，组件再从新循环输出 list。
3. 首要问题 通信 ，要让首页文章模块和 store 通信咱们须要使用到 react-redux （经过提供的 Provider 标签中的 store 属性接收到store，经过 connect 函数打通模块和传入的 store 间的通信。）
4. 其次 获取数据，使用 axios 异步获取数据相对简单可是这部分代码写在哪最合适？？由于要 dispatch 因此首先想到 mapDispatchToState ，但咱们不是直接 dispatch 而是先获取异步数据，因此须要中间人介入也就是 中间件 使用 redux-thunk 能够 dispatch 函数，而函数中就能够异步获取数据并 dispatch 出携带了异步返回数据的 action。