今天来介绍在使用redux中必不可少用要用到的中间件redux-thunk。如果还没有看过我之前关于redux介绍的可以参照
里面的sample4就是关于redux-thunk的。
redux-thunk就是redux的中间件，中间件就是你可以在收到请求和返回请求之间做一些操作。
而thunk中文意思是形实转换程序， 这样可能不太好理解我们来看例子。
// calculation of 1 + 2 is immediate
// x === 3
let x = 1 + 2;
// calculation of 1 + 2 is delayed
// foo can be called later to perform the calculation
// foo is a thunk!
let foo = () => 1 + 2;
这是官方给出来的例子，我们可以大致理解为当一个操作被delay的时候我们可以称之为thunk。
A thunk is a function that returns a function.
This is a thunk.
而redux-thunk恰恰正好就是来做这个事的。
因为action函数只能返回action对象, 而redux-thunk可以通过返回的函数延迟dispatch或者在指定条件下才dispatch。这个函数接受store的两个方法dispatch和getState。
例如调取api。
首先我们要
npm install redux-thunk
sample4的版本为4.0.1
第一步我们要在index.js中让middleware可用。
我们将使用到compose和applyMiddleware
compose 其作用是把一系列的函数，组装生成一个新的函数，并且从后到前，后面参数的执行结果作为其前一个的参数。compose(f, g, h) is identical to doing
(...args) => f(g(h(...args))).
applyMiddleware 最常见的使用场景是无需引用大量代码或依赖类似 Rx 的第三方库实现异步 actions。这种方式可以让你像 dispatch 一般的 actions 那样 dispatch 异步 actions。
import { applyMiddleware, compose, createStore, combineReducers } from 'redux'; // 引入combineReducers, applyMiddleware
然后先使用compose连接到一起在放在store里面
const allStoreEnhancers = compose(
applyMiddleware(thunk),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
) // 其作用是把一系列的函数，组装生成一个新的函数，并且从后到前，后面参数的执行结果作为其前一个的参数。
const store = createStore(
allReducers,
{reducer1:[1], reducer2:[2], reducer3:[3]}, // 替换为allReducers 并且设置初始state 作为第二个参数
allStoreEnhancers
);
如果像官方文档一样不使用compose也可以
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
// Note: this API requires redux@>=3.1.0
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
接下来在action里我们就可以异步返回一个函数
这里用到axios
// 添加一个方法返回一个函数
export function getRequest() {
return dispatch => {
axios({
method: 'get',
url: 'https://randomuser.me/api',
})
.then((res)=>{
const action = {
type: UPDATE_REQUESTNAME,
payload:{
reducer3: res.data.results[0].email
}
}
//dispatch(action)
return action
})
.catch((err)=>{
console.log(err)
})
}
}
在redux-thunk 2.1.0之后的版本中我们可以注入自定义参数
需要用的withExtraArgument方法
就是在thunk后面调用
const store = createStore(
reducer,
applyMiddleware(thunk.withExtraArgument(api))
)
// later
function fetchUser(id) {
return (dispatch, getState, api) => {
// you can use api here
}
}
多个参数的话就要使用解构
const store = createStore(
reducer,
applyMiddleware(thunk.withExtraArgument({ api, whatever }))
)
// later
function fetchUser(id) {
return (dispatch, getState, { api, whatever }) => {
// you can use api and something else here
}
}
