React入门(九)Redux中间件redux-thunk

本节知识点

• (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())
  }