思路:首先在actionCreator.js中将axios请求写好,并且获取数据之后派发action,然后再组建中的mapDispatchToProps中去dispatch这个方法,然后将这个方法放到componentDidMount这个周期函数中,最后在reducer.js中去判断type,并且将数据返回出来,这样就实现啦!
具体代码:
//首先在actionCreator.js中,我需要使用axios,所以在顶部我需要引入
import axios from 'axios';
//然后这中间我们还需要使用actionType.js将type的字符串转化为常量,所以我们也需要引入actionType
import * as actionTypes from './actionTypes'
//在这里我们可以将action拿出来作为一个方法放在这里,等到需要的时候可以直接派发
const changeHomeData = (result) => {
type:actionTypes.CHANGE_HOME_DATA,
articleList:result.articleList,
AuthorList:result.AuthorList
}
//然后在这里获取axios的数据
export const getChangeInfo = () =>{
axios.get('./api/home.json).then((res) => {
const result = res.data.data;
dispatch(changeHomeData (result))
}).catch((res) => {
console.log('error')
})
}
那么既然这里使用了actionTypes中的type,我们就需要在actionTypes.js中定义,并且导出出去。
export const CHANGE_HOME_DATA = '/home/CHANGE_HOME_DATA'
然后这些做完了,我们就可以在需要调用的地方去派发action
//由于需要与store做连接,我们需要引入connect
import { connect } from 'react-redux';
//需要使用actionCreators中的数据,所以需要引入
import { actionCreators } from './store'
//在组件中,我们使用mapDispatchToProps派发一个action给store,告诉store我需要什么
const mapDispatchToProps = (dispatch) =>{
return{
changeHomeData() {
dispatch(actionCreators.getChangeInfo())
}
}
}
//那么做到这一步,我们就需要在componentDidMount这个周期函数中使用changeHomeData的方法
componentDidMount() {
this.props.changeHomeData();
}
到以上这一步时,差不多就要完了,这时候我们就去reducer中告诉store我需要什么数据,并且store会返回给我
//默认数据一定要的
const defaultState =fromJS({
articleList:[],
AuthorList:[]
})
//在这里改变数据
export default (state = defaultState,action) => {
if(action.type === actionTypes.CHANGE_HOME_DATA){
return state.set('articleList',fromJS(action.articleList)).set('AuthorList',fromJS(action.AuthorList));
}
return state
}
最后啦,最后啦,那就是去调用数据啦,需要调用数据,就需要去组建中的mapStateToProps中接收需要使用的数据啦,然后使用map循环调用
//接收数据
const mapStateToProps = (state) =>{
return {
list: state.components.get('articleList')
}
}
//使用循环调用
{
this.props.list && this.props.list.map((item) => {
return (
<ListInfo key={item.get('id')}>
<ListLeft>
<ListTitle>{item.get('title')}</ListTitle>
<ListMessage>
{item.get('desc')}
</ListMessage>
</ListLeft>
<ListRight>
<img src={item.get('imgUrl')} className='pic'/>
</ListRight>
<ListIcon>
<ListSpan className='icon-meta'>
<i className='iconfont'></i>
41.6
</ListSpan>
<ListSpan>
一气浩然
</ListSpan>
<ListSpan>
<i className='iconfont'></i>
48
</ListSpan>
<ListSpan>
<i className='iconfont'></i>
48
</ListSpan>
<ListSpan>
<i className='iconfont'></i>
赏
</ListSpan>
</ListIcon>
</ListInfo>
)
})
}
这样就完成啦!!
总结:
1.期间遇到的问题,就是json数据的格式写错了,所以一直获取不到数据,后来通过报错找到错误的地方。
2.item.get not function,这个错误是因为我在reducer.js中忘记将获取的数据变成一个immutable对象了,所以加上formJS就可以了。