React Hooks實現異步請求實例—useReducer、useContext和useEffect代替Redux方案

本文是學習了2018年新鮮出爐的React Hooks提案以後，針對 異步請求數據寫的一個案例。注意，本文假設了：
1.你已經初步瞭解 hooks的含義了，若是不瞭解還請移步 官方文檔。（其實有過翻譯的想法，不過印記中文一直在翻譯，就是比較慢啦）
2.你使用 Redux實現過異步 Action（非必需，只是本文不涉及該部分知識而直接使用）
3.你據說過 axios或者 fetch（若是沒有，那麼想象一下原生js的 promise實現異步請求，或者去學習下這倆庫）
所有代碼參見倉庫： github | Marckon選擇 hooks-onlineShop分支以及 master分支查看

❗ 本文並不是最佳實踐，若有更好的方法或發現文中紕漏，歡迎指正！

前序方案（不想看能夠直接跳過）

• 不考慮引入Redux

經過學習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

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;
    }
};

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

使用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建立函數

const REQUEST_GOODSLIST = "REQUEST_GOODSLIST";
const RECEIVE_GOODSLIST = "RECEIVE_GOODSLIST";

//開始請求
const requestGoodsList = () => ({
    type: REQUEST_GOODSLIST
});

//接收到數據
const receiveGoodsList = json => ({
    type: RECEIVE_GOODSLIST,
    goodsList: json.goodsList,
    receivedAt: Date.now()
});

export {
    RECEIVE_GOODSLIST,
    REQUEST_GOODSLIST,
    receiveGoodsList,
    requestGoodsList,
}

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

目錄結構

個人目錄結構大概這樣：

src
  |- actions
     |- fetchAction.js
  |- components
     |-...
  |- reducers
     |- fetchReducer.js
  |- index.js

注意點

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方庫。目前代碼比較簡陋。