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

1class App extends React.Component{
2    componentDidMount(){
3        axios.get('/your/api')
4            .then(res=>/*...*/)
5    }
6}

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

1const requestReducer=(state=initialState,action)=>{
2    switch (action.type) {
3        case REQUEST_GOODSLIST:
4            return Object.assign({},state,{
5                isFetching: true
6            });
7        case RECEIVE_GOODSLIST:
8            return Object.assign({},state,{
9                isFetching:false,
10                goodsList:action.goodsList
11            });
12        default:
13            return state;
14    }
15};

1import {Provider} from 'react-redux';
2import thunkMiddleWare from 'redux-thunk';
3import {createStore,applyMiddleware} from 'redux';
4//other imports
5
6let store=createStore(
7    rootReducer,
8    //这里要使用中间件，才能够完成异步请求
9    applyMiddleware(
10        thunkMiddleWare,
11        myMiddleWare,
12
13    )
14);
15class App extends React.Component{
16    render(){
17        return (
18            <Provider store={store}>
19                <RootComponent/>
20            </Provider>
21        )
22    }
23}

1class GoodsList extends React.Component{
2    //...
3    componentDidMount(){
4        this.props.fetchGoodsList('your/url');
5    }
6    //...
7}
8const mapDispatchToProps={
9    fetchGoodsList
10}
11export default connect(
12    mapStateToProps,
13    mapDispatchToProps
14)(GoodsList);

1const REQUEST_GOODSLIST = "REQUEST_GOODSLIST";
2const RECEIVE_GOODSLIST = "RECEIVE_GOODSLIST";
3
4//开始请求
5const requestGoodsList = () => ({
6    type: REQUEST_GOODSLIST
7});
8
9//接收到数据
10const receiveGoodsList = json => ({
11    type: RECEIVE_GOODSLIST,
12    goodsList: json.goodsList,
13    receivedAt: Date.now()
14});
15
16export {
17    RECEIVE_GOODSLIST,
18    REQUEST_GOODSLIST,
19    receiveGoodsList,
20    requestGoodsList,
21}

1import {
2    RECEIVE_GOODSLIST,
3    REQUEST_GOODSLIST,
4} from "../..";
5
6
7export const fetchReducer=(state,action)=>{
8    switch (action.type) {
9        case REQUEST_GOODSLIST:
10            return Object.assign({},state,{
11                isFetching: true
12            });
13        case RECEIVE_GOODSLIST:
14            return Object.assign({},state,{
15                isFetching:false,
16                goodsList:state.goodsList.concat(action.goodsList)
17            });
18        default:
19            return state;
20    }
21};
22
23

1import React,{useReducer} from 'react';
2import {fetchReducer} from '..';
3
4//创建并export上下文
5export const FetchesContext = React.createContext(null);
6
7function RootComponent() {
8    //第二个参数为state的初始状态
9    const [fetchesState, fetchDispatch] = useReducer(fetchReducer, {
10            isFetching: false,
11            goodsList: []
12        });
13    return (
14        //将dispatch方法和状态都作为context传递给子组件
15         <FetchesContext.Provider value={{fetchesState,dispatch:fetchDispatch}}>
16             //...
17             //用到context的一个子组件
18             <ComponentToUseContext/>
19         </FetchesContext.Provider>
20    )
21}

1import {FetchesContext} from "../RootComponent";
2import React, {useContext, useEffect,useState} from 'react';
3import axios from 'axios';
4
5function GoodsList() {
6
7    //获取上下文
8    const ctx = useContext(FetchesContext);
9    
10    //一个判断是否重新获取的state变量
11    const [reFetch,setReFetch]=useState(false);
12
13    //具有异步调用副作用的useEffect
14    useEffect(() => {
15        //首先分发一个开始异步获取数据的action
16        ctx.dispatch(requestGoodsList());
17            axios.get(proxyGoodsListAPI())
18                .then(res=>{
19                    //获取到数据后分发一个action，通知reducer更新状态
20                    ctx.dispatch(receiveGoodsList(res.data))
21                })
22      //第二个参数reFetch指的是只有当reFetch变量值改变才重新渲染
23    },[reFetch]);
24
25    return (
26        <div onScroll={handleScroll}>
27            {
28                //children
29            }
30        </div>
31    )
32}
33

1src
2  |- actions
3     |- fetchAction.js
4  |- components
5     |-...
6  |- reducers
7     |- fetchReducer.js
8  |- index.js