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中发送异步请求获取数据的小功能了