React:快速上手(7)——使用中间件实现异步操作
本文参考链接：Stack Overflow
redux-thunk
我们使用store.dispath进行派发时，只能传递一个普通对象进去，如下：
store.dispatch({ type: 'INCREMENT' })
但是，在使用redux-thunk中间件后，我们就可以传递一个函数进去
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
const store = createStore(
reducer,
applyMiddleware(thunk)
)
store.dispatch(function (dispatch) {
// ... which themselves may dispatch many times
dispatch({ type: 'INCREMENT' })
dispatch({ type: 'INCREMENT' })
dispatch({ type: 'INCREMENT' })
setTimeout(() => {
// ... even asynchronously!
dispatch({ type: 'DECREMENT' })
}, 1000)
})
启用此中间件后，如果您dispatch一个函数，Redux Thunk中间件会将dispatch作为参数传进该函数中去。在这个函数中，我们派发了多个action，甚至可以异步执行一些操作，比如延迟1000ms，派发action。那我们执行异步操作，就是通过这个中间件来实现的。
Action Creator
我们最好把action封装到函数中，即(Action Creater)，来提高灵活性以及防止我们拼写错误。对于对象，我们可以直接如下写：
function showNotification(id, text) {
return { type: 'SHOW_NOTIFICATION', id, text }
}
function hideNotification(id) {
return { type: 'HIDE_NOTIFICATION', id }
}
那么这样一个函数式的action，我们也可以将其封装到一个函数中，它返回一个函数式的action
let nextNotificationId = 0
export function showNotificationWithTimeout(text) {
return function (dispatch) {
const id = nextNotificationId++
dispatch(showNotification(id, text)) setTimeout(() => {
dispatch(hideNotification(id))
}, 5000)
}
}
那么，我们在调用它的时候是需要手动传入一个dispatch的。
showNotificationWithTimeout('You just logged in.')(this.props.dispatch)
如果启用了Redux Thunk中间件，则只要你尝试dispatch函数而不是对象，中间件就会使用调度方法本身作为第一个参数来调用该函数，也就是我们可以这样写：
// component.js
this.props.dispatch(showNotificationWithTimeout('You just logged in.'))
配合React Redux的connect
Redux可以自动识别出这样的“特殊”Action Creator（我们称之为Thunk Action Creator），我们现在可以在任何我们使用常规动作创建者的地方使用它们。例如，我们可以将它们与connect（）一起使用：
// actions.js
function showNotification(id, text) {
return { type: 'SHOW_NOTIFICATION', id, text }
}
function hideNotification(id) {
return { type: 'HIDE_NOTIFICATION', id }
}
let nextNotificationId = 0
export function showNotificationWithTimeout(text) {
return function (dispatch) {
const id = nextNotificationId++
dispatch(showNotification(id, text))
setTimeout(() => {
dispatch(hideNotification(id))
}, 5000)
}
}
// component.js
import { connect } from 'react-redux'
// ...
this.props.showNotificationWithTimeout('You just logged in.')
// ...
export default connect(
mapStateToProps,
{ showNotificationWithTimeout }
)(MyComponent)
在thunk中获取状态
Redux Thunk提供了一种方法来获取Redux store的state。除了dispatch之外，它还将getState作为第二个参数传递给您从thunk action creator返回的函数。这让thunk读取store的当前state。
let nextNotificationId = 0
export function showNotificationWithTimeout(text) {
return function (dispatch, getState) {
// Unlike in a regular action creator, we can exit early in a thunk
// Redux doesn’t care about its return value (or lack of it)
if (!getState().areNotificationsEnabled) {
return
} const id = nextNotificationId++
dispatch(showNotification(id, text)) setTimeout(() => {
dispatch(hideNotification(id))
}, 5000)
}
}