欢迎光临
我们一直在努力

React.15 React异步请求方式(中间件)

简介

通常情况下,action只是一个对象,不能包含异步操作,这导致了很多创建action的逻辑只能写在组件中,代码量较多也不便于复用,同时对该部分代码测试的时候也比较困难,组件的业务逻辑也不清晰,使用中间件了之后,可以通过actionCreator异步编写action,这样代码就会拆分到actionCreator中,可维护性大大提高,可以方便于测试、复用,同时actionCreator还集成了异步操作中不同的action派发机制,减少编码过程中的代码量

常见的异步库:

  • Redux-thunk
  • Redux-saga
  • Redux-effects
  • Redux-side-effects
  • Redux-loop
  • Redux-observable

基于Promise的异步库:

  • Redux-promise
  • Redux-promises
  • Redux-simple-promise
  • Redux-promise-middleware

一、简单使用axios模块实现

思路:简单axios模块,在生命周期ComponentDidMount中使用,获取到数据后创建action并执行store.dispatch(action)。

1、在actionType中添加异步数据需要的action类型

export const INIT_TODO_ITEM = 'init_todo_item'

2、在actionCreator中添加生成action的函数

export const getInitTodoItemAction = (list) => ({
    type: INIT_TODO_ITEM,
    list
})

3、在容器组件的ComponentDidMount中发送ajax请求,并生成和发送action

componentDidMount(){
    axios.get('/getData').then(function(res){
      const action = getInitTodoItemAction(res.data)
      store.dispatch(action)
    })
}

4、在reducer中添加处理action的方法

if(action.type === INIT_TODO_ITEM){
    newState.list = action.list
    return newState 
}

二、使用redux-thunk中间件

思路:redux-thunk是redux的中间件,它可以让redux支持函数类型action的发送。redux-thunk的使用分为三步:store下中间件配置、actionCreator下创建请求逻辑、组件下创建函数action

1、配置中间件,在store的创建中配置

import {createStore, applyMiddleware, compose} from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk'

// 设置调试工具
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
// 设置中间件
const enhancer = composeEnhancers(
  applyMiddleware(thunk)
);

const store = createStore(reducer, enhancer);

export default store;

2、添加一个返回函数的actionCreator,将异步请求逻辑放到这里

/**
  发送get请求,并生成相应action,更新store的函数
  @param url {string} 请求地址
  @param func {function} 真正需要生成的action对应的actionCreator
  @return {function} 
*/
// dispatch为自动接收的store.dispatch函数 
export const getHttpAction = (url, func) => (dispatch) => {
    axios.get(url).then(function(res){
        const action = func(res.data)
        dispatch(action)
    })
}

3、生成action,并发送action

componentDidMount(){
    var action = getHttpAction('/getData', getInitTodoItemAction)
    // 发送函数类型的action时,该action的函数体会自动执行
    store.dispatch(action)
}

三、使用redux-saga中间件

redux-saga可以捕获action,然后执行一个函数,那么可以把异步请求代码放在这个函数中

1、配置中间件

import {createStore, applyMiddleware, compose} from 'redux';
import reducer from './reducer';
import createSagaMiddleware from 'redux-saga'
import TodoListSaga from './sagas'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const sagaMiddleware = createSagaMiddleware()

const enhancer = composeEnhancers(
  applyMiddleware(sagaMiddleware)
);

const store = createStore(reducer, enhancer);
sagaMiddleware.run(TodoListSaga)

export default store;

2、将异步请求放在在sagas.js文件中

import {takeEvery, put} from 'redux-saga/effects'
import {initTodoList} from './actionCreator'
import {GET_INIT_ITEM} from './actionTypes'
import axios from 'axios'

function* func(){
    try{
        // 可以获取异步返回数据
        const res = yield axios.get('/getData')
        const action = initTodoList(res.data)
        // 将action发送到reducer
        yield put(action)
    }catch(e){
        console.log('网络请求失败')
    }
}

function* mySaga(){
    // 自动捕获GET_INIT_ITEM类型的action,并执行func
    yield takeEvery(GET_INIT_ITEM, func)
}

export default mySaga

3、发送action

componentDidMount(){
    const action = getInitTodoItemAction()
    store.dispatch(action)
}

著作权归作者所有。

赞(0) 打赏
未经允许不得转载:散人研 » React.15 React异步请求方式(中间件)
分享到: 更多 (0)

评论 抢沙发

4 + 7 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏