34.使用Redux thunk中间件进行ajax请求发送 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

安装和配置redux thunk

 npm install redux-thunk

或者

  yarn add redux-thunk
  • 在创建store的时候，使用Redux-thunk中间件
  // store/index.js:

  import {createStore, applyMiddleware} from 'redux'
  import reducer from './reducer'
  import thunk from 'redux-thunk'
   
  const store = createStore(
     reducer,
     applyMiddleware(thunk),
  )

  export default store

redux thunk作用: 可以在actionCreator中写异步代码

  • 观察 actionCreators.js，可以看出，actionCreator中返回的内容都是函数，这个函数返回一个对象。
import {CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './actionTypes'

export const getInputChangeAction = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
})

export const getAddItemAction = () => ({
    type: ADD_TODO_ITEM
})

export const getDeleteItemAction = (index) => ({
    type: DELETE_TODO_ITEM,
    index
})
  • 而当使用了 redux-thunk之后，则actionCreator返回的函数中就不仅仅可以返回对象，还可以返回一个函数了。

在这个函数中，我们可以写我们的异步请求。

import axios from 'axios'

export const getTodoList = () => {
   // 使用了redux-thunk之后，actionCreator中返回的可以是一个函数 
   // 且这个函数能够接收到store的dispatch方法
   return (dispatch) => {
     // 异步操作
     axios.get('/list.json')
        .then(res => {
          // const data = res.data
          // const action = initListAction(data)
          // dispatch(action)     // 直接可以使用参数中的dispatch来派发actionCreator中的action。
        })
   }
}
  • 使用redux-thunk中返回的 函数action，在 TodoList.js组件中：
import { getTodoList } from './store/actionCreators'

componentDidMount() {
   const action = getTodoList() // 此时的action就不再是一个对象了，而是一个函数
   store.dispatch(action) // 直接把这个 函数action 派发给Store，
   // 接着、Store接收到这个 函数action,会自动地执行这个 函数action。
   // 而这个函数action被执行，就会进行上面的异步操作，发送请求。
}

总结：

之所以能够在组件中把返回类型为函数action 发送出去，就是因为你使用了redux thunk。

如果在创建store时，没有使用redux thunk，则就会报错：action必须是一个对象。只有你使用了redux-thunk,actionCreator函数中返回的才可以是一个函数。