Redux中发送异步请求获取数据

1：发送异步请求是在componentDidMount这个生命周期里执行的，用到的是axios请求接口,创建一个action，将获取到的接口数据存进去，发送dispatch方法通知store修改里面的数据

代码：

  componentDidMount(){
    axios.get('/todolist').then((res)=>{
      const data = res.data
      const action = getInitListAction(data)
      store.dispatch(action)
    })
  }

getInitListAction是封装好的action，在actionCreators.js中

	export const getInitListAction = (data) =>({
	  type:INIT_LIST_ACTION,
	  data
	})

INIT_LIST_ACTION是封装好的type，放在actionTypes.js中

export const  INIT_LIST_ACTION = 'init_list_action'

2:store将传过来的action和当前的state数据一并传给reducer,reducer获取传过来的state的值和action，通过action.type的值，知道这个是将接口获取的值赋值给state里的list

reducer.js

import {INIT_LIST_ACTION} from './actionTypes'
const defalutState ={
  defalutValue:'',
  list:[]
}
// reducer是一个纯函数，给定固定的输入，就一定会有固定的输出，而且不会有任何的副作用
export default (state=defalutState,action)=>{
  if(action.type===INIT_LIST_ACTION){
    const newState = JSON.parse(JSON.stringify(state))
    newState.list = action.data
    return newState
  }
  return state
}

3：reducer处理好数据之后，将新的数据返回给store，组件通过store.subscribe（）监听到数据已经改变了，就用store.getState()重新赋值给当前的state，就可以做到获取接口数据之后，页面也跟着改变了

组件文件中：

// 这是一个容器组件，专门写逻辑的组件
class AntdToDoList extends Component{
  constructor(props){
    super(props)
    this.state = store.getState()
    this.handeStoreChange = this.handeStoreChange.bind(this)
    // 这是订阅store的改变，只要store发生改变自定义的函数（this.handeStoreChange）就会调用一次
    store.subscribe(this.handeStoreChange)
  }
  render(){
    return (
     <AntdToDoListUI 
      defalutValue = {this.state.defalutValue}
      list={this.state.list}
     />
    )
  }
  // 监听store的改变
  handeStoreChange(){
    //当store发生改变的时候，就重新用store.getState()获取一下数据，替换掉state的数据，页面就发生了联动
    this.setState(store.getState())
  }
}
export default AntdToDoList

以上就实现了一个Redux中发送异步请求获取数据的小功能了