react-redux搭配redux-thunk中间件处理异步请求React Redux is the official

前言

平常我们写异步请求，都需要在componentDidMount里面完成，如下

  componentDidMount() {
    const { changeHomeData } = this.props
    axios.get('/api/home.json').then((res) => {
      const { data } = res.data
      const action = actionCreator.getHomeData(data)
      changeHomeData(action)
    })
  }

这样代码看起来就有点臃肿，因此可以借助react-redux和redux-thunk来更好的管理代码，因此做一下记录

正文内容

首先我们要改造一下我们的store

为了让我们使用了redux-thunk中间件还能继续使用redux DevTools，我们需要引入compose模块做一下store enhancer

import { createStore, applyMiddleware, compose } from 'redux'
import Reducer from './reducer'
import thunk from 'redux-thunk'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(Reducer, composeEnhancers(applyMiddleware(thunk)))

export default store

redux-thunk能让我们的action不仅能返回一个对象还能返回一个函数，在函数里面在进行一次dispatch，这样就能把异步请求抽离到action里面

import axios from 'axios'

export const CHANGE_HOME_LIST = 'CHANGE_HOME_LIST'

function changHomeData(data) {
  return {
    type: CHANGE_HOME_LIST,
    topicList: data.topicList,
    articleList: data.articleList,
    recommendList: data.recommendList,
  }
}

export function getHomeData() {
  return (dispatch) => {
    axios.get('/api/home.json').then((res) => {
      const { data } = res.data
      dispatch(changHomeData(data))
    })
  }
}

这样我们只需要在mapDispatchToState里面直接disptach getHomeData这个action就行了, 
然后在componentDidMount调用这个changeHomeData这个函数就行了    

const mapDispatchToProps = (dispatch) => {
  return {
    changeHomeData() {
      dispatch(actionCreator.getHomeData())
    },
  }
}
class Home extends React.Component {
// ..........
  componentDidMount() {
    const { changeHomeData } = this.props
    changeHomeData()
  }
}

接着我们可以引入react-redux模块
React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.

我们需要写引入Provider这个组件来对App.js做一层包装，并把store传递给他

import React from 'react
import { Provider } from 'react-redux'
import Store from './store'

class App extends React.Component {
	render() {
    	 <Provider store={Store}>
         	// ....Components
         </Provider>
    }
}

如果任何一个子组件想要使用store里面的数据，只需要用connect这个方法做一下包装就行了

 //  Child Component
import React from 'react'
import { connect } from 'react-redux'

class Child extends React.Component {
	// ...
}
export default connect(mapStateToProps,mapStateToProps)(Child)

connect这个方法接收四个参数，但是一般用到的就是前面两个mapStateToProps,mapStateToProps，名字可以随便取，这里我们约定写这两个，mapStateToProps这个函数返回一个纯对象，mapDispatchToProps可以是一个对象也可以是一个函数，如果是一个函数，就需要返回一个对象

const mapStateToProps = (state) => {
  return {
    
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    
  }
}

写到最后

希望能给大家带来一个帮助

react-redux搭配redux-thunk中间件处理异步请求

前言

正文内容

写到最后

参考资料