本节知识点
- (1) redux-thunk作用
- (2) redux-thunk使用
(一) redux-thunk作用
他的作用就是让actions里面返回的不仅仅是一个对象了，还可以是一个方法，这样简化了业务逻辑
(二) redux-thunk使用
(i) 第一步安装
npm install --save redux-thunk
(ii) 修改store仓库里面的文件
import { createStore, applyMiddleware, compose } from 'redux'
import reduce from './reduce'
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(reduce, enhancer)
export default store
(iii) 在actions 里面开始写方法
export const initdata = data => {
return {
type: actionTypes.INIT_DATA,
data
}
}
// 使用thunk后返回的可以是函数
export const get_data = () => {
return dispatch => {
axios.post('/React1.json').then(res => {
let result = res.data
console.log(initdata(result))
dispatch(initdata(result))
})
}
}
这样他就能在actions里面执行action减少逻辑复杂量
(iv)前台调用的时候就是
componentDidMount() {
store.dispatch(actions.get_data())
}
