使用redux-thunk实现ajax数据请求

前言

redux-thunk 是一个流行的用来处理异步操作的redux中间件，作为一个新手，如果你并不知道具体哪些场景需要使用这个中间件，那么就不要用它，就像官方所说的这样：

If you’re not sure whether you need it, you probably don’t.

redux-thunk 常用来处理一些请求操作，这里以 axios 请求为例，来演示redux-thunk 的配置使用。

安装&&配置

使用npm安装即可：

npm install --save redux-thunk

这里要讲下它的配置，按照官方文档很简单就能配置好：

import { createStore, applyMiddleware } from 'redux'

// 在同级目录引入reducer
import reducer from './reducer'

// 引入redux-thunk
import thunk from 'redux-thunk'

// 创建store
const store = createStore(
    reducer,
    applyMiddleware(thunk)
)

上面的配置就是可以用的，参考文档：redux-thunk

在这里想补充一点的是多个中间件使用时怎么配置。由于我会用到 Redux DevTools 这个浏览器插件来调试 redux，这个也需要我们在代码端配置好的，现在的场景就是我要配置devtools的代码，也要配置redux-thunk 的代码，往后可能还要使用到其他中间件，所以需要了解一下它们结合的配置。好在也有文档给出示范，参考 redux-devtools-extension

我的具体配置为：

import { createStore, applyMiddleware, compose } from 'redux'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk),
);

const store = createStore(
	reducer,
	enhancer
)

export default store

如果需要再使用其他中间件，加到 applyMiddleware 中 thunk 后面即可。

使用

在不使用 redux-thunk 的情况下，axios 请求一般是放在 componentDidMount 这个生命周期里的，现在用到了 redux-thunk ，我们可以将请求放到 action里，我们创建一个文件 actionCreator.js，专门用来创建action所用，现在我们就来创建一个用来请求的action：

import axios from 'axios'

export function getList(){
	return ()=>{
		axios.get('https://www.easy-mock.com/mock/5ba7324d774ea0691ff86d5e/test/list')
        .then(res=>{
             console.log(res)
        })
	}
}

使用redux-thunk中间件后，创建的action可以返回一个函数，函数里执行请求操作，此时在页面组件里即可使用这个action，如：

// App.js文件，一个页面组件，代码不完整，仅供参考

import store from './store'
import { getList } from './store/actionCreator.js'

class App extends Component {
 // ...
 
 componentDidMount(){
    const action = getList()
    store.dispatch(action)
  }
  
  // ...
 
}

当我们dispatch这个action时，action里的函数会自动执行，可在浏览器端调试查看。但是目前提交并不会影响store状态，因为我们虽然执行了action的函数，但没有执行提交真正action的操作，所以我们需要回到actionCreator.js文件里继续完善我们的代码：

export function getList(){
	return (dispatch)=>{
		axios.get('https://www.easy-mock.com/mock/5ba7324d774ea0691ff86d5e/test/list')
        .then(res=>{
             dispatch({
             	type:'CHANGE_LIST',
             	data: res.data.data
             })
        })
	}
}

上面代码中，返回的函数里可以把dispatch作为参数传进去，最终通过dispatch提交真实的action。

以上就是通过redux-thunk实现axios请求的简单流程。