React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案

素颜马尾好姑娘i 2022-04-03 09:41 355阅读 0赞

> 本文是学习了2018年新鲜出炉的React Hooks提案之后，针对 **异步请求数据**写的一个案例。注意，本文假设了：  
> 1.你已经初步了解 `hooks`的含义了，如果不了解还请移步 [官方文档][Link 1]。（其实有过翻译的想法，不过印记中文一直在翻译，就是比较慢啦）  
> 2.你使用 `Redux`实现过异步 `Action`（非必需，只是本文不涉及该部分知识而直接使用）  
> 3.你听说过 `axios`或者 `fetch`（如果没有，那么想象一下原生js的 `promise`实现异步请求，或者去学习下这俩库）  
> 全部代码参见仓库： [github | Marckon][github _ Marckon]选择 [`hooks-onlineShop`][hooks-onlineShop]分支以及 `master`分支查看

❗ ***本文并非最佳实践，如有更好的方法或发现文中纰漏，欢迎指正！***

# 前序方案（不想看可以直接跳过） #

*  **不考虑引入`Redux`**

通过学习[`React`生命周期][React]，我们知道适合进行异步请求的地方是`componentDidMount`钩子函数内。因此，当你不需要考虑状态管理时，以往的方法很简单：

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

*  **引入`Redux`进行状态管理**

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

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

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

*requestReducer.js:* 处理同步action

*App Component* ：你引入redux store和redux-thunk中间件的地方

import {Provider} from 'react-redux';
    import thunkMiddleWare from 'redux-thunk';
    import {createStore,applyMiddleware} from 'redux';
    //other imports
    
    let store=createStore(
        rootReducer,
        //这里要使用中间件，才能够完成异步请求
        applyMiddleware(
            thunkMiddleWare,
            myMiddleWare,
    
        )
    );
    class App extends React.Component{
        render(){
            return (
                <Provider store={store}>
                    <RootComponent/>
                </Provider>
            )
        }
    }

*GoodsList Component* ：需要进行异步请求的组件

class GoodsList extends React.Component{
        //...
        componentDidMount(){
            this.props.fetchGoodsList('your/url');
        }
        //...
    }
    const mapDispatchToProps={
        fetchGoodsList
    }
    export default connect(
        mapStateToProps,
        mapDispatchToProps
    )(GoodsList);

完整代码：[branch：master-onlineShop][github _ Marckon]

# 使用`Hooks`\-`useReducer()`和`useContext()` #

总之使用`Redux`很累，当然，你可以不使用Redux，直接通过`props`层层传递，或者使用`context`都可以。只不过本文我们学过了`useReducer`，使用到了`Redux`的思想，总要试着用一下。

**这里你不需要引入别的任何第三方库了，简简单单地使用`React@16.7.0-alpha.2`版本就好啦**

很重要的一点就是——**函数式组件**，现在React推荐我们这么做，可以基本上代替`class`写法。

## 函数签名 ##

1.  `useReducer(reducer,initialState)`
2.  `useContext(ctxObj)`
3.  `useEffect(effectFunction,[dependencyValues])`

## 概览-你需要编写什么 ##

1.  **action.js：**
    
     *  我们还使用`redux`的思想，编写action
2.  **reducer.js：**
    
     *  处理action，不同于`redux`的`reducer`，这里我们可以不用提供初始状态
3.  **根组件：**
    
     *  `Provider`提供给子组件`context`
     *  `useReducer`定义的位置，引入一个`reducer`并且提供初始状态`initialState`
4.  **子组件：**
    
     *  `useContext`定义的位置，获取祖先组件提供的`context`
     *  `useEffect`用于进行异步请求

## 实现 ##

### 1.action.js：我们使用action创建函数 ###

### 2.reducer.js：判断action的类型并进行相应处理，更新`state` ###

import {
        RECEIVE_GOODSLIST,
        REQUEST_GOODSLIST,
    } from "../..";
    
    
    export const fetchReducer=(state,action)=>{
        switch (action.type) {
            case REQUEST_GOODSLIST:
                return Object.assign({},state,{
                    isFetching: true
                });
            case RECEIVE_GOODSLIST:
                return Object.assign({},state,{
                    isFetching:false,
                    goodsList:state.goodsList.concat(action.goodsList)
                });
            default:
                return state;
        }
    };

### 3.根组件：引入`reducer.js` ###

import React,{useReducer} from 'react';
    import {fetchReducer} from '..';
    
    //创建并export上下文
    export const FetchesContext = React.createContext(null);
    
    function RootComponent() {
        //第二个参数为state的初始状态
        const [fetchesState, fetchDispatch] = useReducer(fetchReducer, {
                isFetching: false,
                goodsList: []
            });
        return (
            //将dispatch方法和状态都作为context传递给子组件
             <FetchesContext.Provider value={
       {fetchesState,dispatch:fetchDispatch}}>
                 //...
                 //用到context的一个子组件
                 <ComponentToUseContext/>
             </FetchesContext.Provider>
        )
    }

### 4.子组件：引入`FetchesContext` ###

import {FetchesContext} from "../RootComponent";
    import React, {useContext, useEffect,useState} from 'react';
    import axios from 'axios';
    
    function GoodsList() {
    
        //获取上下文
        const ctx = useContext(FetchesContext);
        
        //一个判断是否重新获取的state变量
        const [reFetch,setReFetch]=useState(false);
    
        //具有异步调用副作用的useEffect
        useEffect(() => {
            //首先分发一个开始异步获取数据的action
            ctx.dispatch(requestGoodsList());
                axios.get(proxyGoodsListAPI())
                    .then(res=>{
                        //获取到数据后分发一个action，通知reducer更新状态
                        ctx.dispatch(receiveGoodsList(res.data))
                    })
          //第二个参数reFetch指的是只有当reFetch变量值改变才重新渲染
        },[reFetch]);
    
        return (
            <div onScroll={handleScroll}>
                {
                    //children
                }
            </div>
        )
    }

完整代码参见：[branch：hooks-onlineShop][hooks-onlineShop]

### 目录结构 ###

我的目录结构大概这样：

## 注意点 ##

1.  使用`useContext()`时候我们不需要使用`Consumer`了。但不要忘记`export`和`import`上下文对象
2.  `useEffect()`可以看做是`class`写法的`componentDidMount`、`componentDidUpdate`以及`componentWillUnMount`三个钩子函数的组合。
    
     *  当返回了一个函数的时候，这个函数就在`compnentWillUnMount`生命周期调用
     *  默认地，传给useEffect的第一个参数会在每次（包含第一次）数据更新时重新调用
     *  当给`useEffect()`传入了第二个参数（数组类型）的时候，effect函数会在第一次渲染时调用，其余仅当数组中的**任一**元素发生改变时才会调用。**这相当于我们控制了组件的`update`生命周期**
     *  `useEffect()`第二个数组为空则意味着仅在`componentDidMount`周期执行一次
3.  代码仓库里使用了`Mock.js`拦截api请求以及`ant-design`第三UI方库。目前代码比较简陋。

来源：https://segmentfault.com/a/1190000017209855

[Link 1]: https://reactjs.org/docs/hooks-intro.html
[github _ Marckon]: https://github.com/Marckon/React-MPA/tree/master/pages/online-shop
[hooks-onlineShop]: https://github.com/Marckon/React-MPA/tree/hooks-onlineShop/pages/online-shop
[React]: https://segmentfault.com/a/1190000017175195