1、 不使用middleware时,这样使用redux
function mapStateToProps(state) {
return {
value: state.count
}
}
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction)
}
}
// Action Creator
const increaseAction = { type: 'increase' }
然后，使用connect方法生成容器组件。
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
2、使用middleware时候，redux-thunk
import thunkMiddleware from 'redux-thunk'
const store = createStore(reducer, applyMiddleware(thunkMiddleware))
注册后可以这样使用：
javascript
复制代码
// 用于发起登录请求，并处理请求结果
// 接受参数用户名，并返回一个函数(参数为dispatch)
const login = (userName) => (dispatch) => {
dispatch({ type: 'loginStart' })
request.post('/api/login', { data: userName }, () => {
dispatch({ type: 'loginSuccess', payload: userName })
})
}
export login
然后在
> const App = connect(
> mapStateToProps,
> {login} //这里引入上面的action方法
> )(Counter)
> ```
那使用middleware有什么好处呢？ redux-thunk thunk是延迟计算的意思，这样我们可以在dispatch之前处理接口请求操作，然后再执行对应的dispatch操作
提供Redux的异步解决方案，弥补Redux功能的不足
仅仅是让dispath多支持了一种类型，就是函数类型，在使用Redux-Thunk前我们dispatch的action必须是一个纯对象(plain object)，使用了Redux-Thunk后，dispatch可以支持函数，这个函数会传入dispatch本身作为参数
参考地址：
