redux-thunk中间件的简单认识
redux-thunk中间件可以让action创建函数先不返回一个action对象,而是返回一个函数,函数传递两个参数(dispatch,getState),函数体内进行业务逻辑的封装
安装使用
- 安装:yarn add redux-thunk
- 导入:import thunk from ‘redux-thunk’
- 中间件:import { createStore, applyMiddleware } from ‘redux’
- 创建store:var store = createStore(reducer, applyMiddleware(thunk))
使用方法
使用redux-thunk中间件,我们可以在actionCreator 中返回一个函数而不是对象
export default {
getDate() {
return (dispatch) => {
fetch("http://localhost:4000/list").then((res) => res.json()).then(res => {
dispatch({
type: "GETDATA",
list: res
})
})
}
}
}
可以注意到函数最终发送了一个action,dispatch给reducer,进行相应的处理。使用的方法和其他action一样。
const initialState = {
list: []
}
export default (state = initialState, action) => {
switch (action.type) {
case "GETDATA":
var newState = { ...state }
newState.list = action.list
return newState
default:
return state
}
}
在组建中调用
componentDidMount(){
this.props.getData();
}
middleware就是中间件。
使用redux-thunk让我们可以在action构造器返回一个函数,disp时就会执行它,然后在函数内部发送一个普通的action给reducer。
<逆战><13>