Hooks异步请求实例-useReducer、useContext和useEffect替代Redux

大虎

图形学硕士 / 前端架构师

背景

Hooks从诞生至今已经有了长足的进步，不得不说hooks的出现是React的一个标志性里程碑。用hooks来解决开发中的问题大大提升了我们日常工作的效率，本文是针对 异步请求数据 的一个案例，目前只针对useReducer、useContext、useEffect进行探讨，同时还需要使用过Redux进行过异步action添加。

扫码加微信前端二、三群（一群已满） ：BAT大厂资深大牛定期推送面经与源码分析，各平台大牛优秀文章推荐，更有内推跳槽咨询、视频资源共享、学习资料文章pdf面经网盘资源等等福利。加入我们一起进步。

群内分享每日一题：题目传送门

前端电子书大全：电子书

非Hooks实现方案

在React的生命周期中（初学请参考：安大虎：使用setState对数据进行同步、异步操作），我们知道componentDidMount里我们最适合去进行异步请求，因此在不需要考虑状态管理时，这种方法很简单：

class App extends React.Component{
    componentDidMount(){
        axios.get('/your/api')
            .then(res=>/*...*/)

随后引入Redux进行状态管理

当你决定使用 Redux 进行状态管理时，比如将异步获取到的数据储存在 store 中，事情就开始复杂起来了。根据 Redux 的官方文档案例来看，为了实现异步 action ，你还得需要一个类似于redux-thunk、redux-saga的第三方库来解析你的异步 action 。

（没用过redux可以参考：安大虎：React-Redux实现无关联组件props传值）

Action.js： 定义异步请求action的地方

//这是一个异步action，分发了两个同步action，redux-thunk能够理解它
const fetchGoodsList = url => dispatch => {
    dispatch(requestGoodsList());
    axios.get(url)
        .then(res=>{
            dispatch(receiveGoodsList(res.data))

Reducer.js: 处理同步action

const requestReducer=(state=initialState,action)=>{
    switch (action.type) {
        case REQUEST_GOODSLIST:
            return Object.assign({},state,{
                isFetching: true
        case RECEIVE_GOODSLIST:
            return Object.assign({},state,{
                isFetching:false,
                goodsList:action.goodsList
        default:
            return state;