代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第12次提交
准备工作
1.将header中无状态组件改回正常组件
即将const Header = (props) => {}中return的数据都放回
class Header extend Component {
render(){
}
}中，将props.改为this.props.
在render下写const { focused,handelInputFocus,handleInputBlur } = this.props;之后删除this.props
2.将{getListArea(focused)}方法改为{this.getListArea()}
将代码块改写至render上方
getListArea(){
const { focused } = this.props;
if (focused){
return(
<SearchInfo>
<SearchInfoTittle>
热门搜索
<SearchInfoSwitch>换一批</SearchInfoSwitch>
</SearchInfoTittle>
<SearchInfoList>
<SearchInfoItem>教育</SearchInfoItem>
<SearchInfoItem>区块链</SearchInfoItem>
<SearchInfoItem>理财</SearchInfoItem>
</SearchInfoList>
</SearchInfo>
)
}else {
return null;
}
}
数据请求
1.到header目录下的reducer中添加list数组
const defaultState = fromJS({
focused: false,
list:[]
});
2.安装redux-thunk它使得我们可以在action里面去写函数
yarn add redux-thunk
到src目录下store的index文件使用thunk
import thunk from 'redux-thunk';
并使用applyMiddleware方法
import { createStore, compose ,applyMiddleware} from 'redux';
去使用thunk中间件
import { createStore, compose ,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(
applyMiddleware(thunk)
));
export default store;
有了redux-thunk我们就可以在action里面做异步的操作了，
到actionCreators里添加getList方法，（使用thunk后就可以在actionCreators里调用方法了）
handleInputFocus(){
dispatch(actionCreators.getList());
dispatch(actionCreators.searchFocus());
},
export const getList = () => {
return (dispatch)=> {
console.log(123);
}
};
3.安装axios
yarn add axios
制作假数据
a.到public文件夹下建一个api文件夹，再在api文件夹下建一个headerList.json文件
b.到简书网站，检查--->Network--->刷新页面--->清空，点击搜索框
屏幕快照 2019-06-12 14.53.23.png
点击trending_search
屏幕快照 2019-06-12 14.57.20.png
右边就是热门搜索的数据，复制，并按一定格式修改使用,例如
{
"success": true,
"data": ["区块链","小程序","vue","毕业","PHP","故事","flutter","理财","美食","投稿","手帐","书法","PPT","穿搭","打碗碗花","简书","姥姥的澎湖湾","设计","docker"]
}
放到headerList.json中使用。
4.在actionCreators中使用axios请求数据
import axios from 'axios';
export const getList = () => {
return (dispatch)=> {
axios.get('/api/headerList.json')
.then((res)=>{
console.log(res);
const data = res.data;
console.log(data);
}).catch(()=>{
console.log('error');
})
}
};
5.获取完数据以后呢，改store里的数据-->（构建action再派发给store，store在给reducer）
const action = {
type: 'change_list',
data: data.data
}
dispatch(action);
在actionCreators中整理一下
export const changeList = (data) => ({
type: 'change_list',
data
});
export const getList = () => {
return (dispatch)=> {
axios.get('/api/headerList.json')
.then((res)=>{
const data = res.data;
const action = changeList(data);
console.log(data);
}).catch(()=>{
console.log('error');
})
}
};
这时action会被传递给reducer。
6.现在要到header下的reducer
首先,我们在创建数组的时候使用fromJS方法，所以这个数组的数据是immutable类型的
const defaultState = fromJS({
focused: false,
list:[]
});
所以我们要做一些修改，这个数据是从actionCreators获取的，所以到actionCreators做一些修改。
到actionCreators，引入fromJS这个库
import {fromJS} from 'immutable';
export const changeList = (data) => ({
type: constants.CHANGE_LIST,
data:fromJS(data)
});
7.这时list里面已经有数据了，现在header到index里将list列表的数据循环放入<SearchInfoItem>组件中
首先，我们到mapStateToProps中拿到list数据
const mapStateToProps = (state) => {
return {
list: state.getIn(['header', 'list'])
focused: state.getIn(['header', 'focused'])
}
};
<SearchInfoList>
{
list.map((item)=>{
return <SearchInfoItem key={item}>{item}</SearchInfoItem>
})
}
</SearchInfoList>
然后，就OK啦
优化代码
header的reducer中使用if,改用switch
switch(action.type) {
case constants.SEARCH_FOCUS:
return state.set('focused', true);
case constants.SEARCH_BLUR:
return state.set('focused', false);
case constants.CHANGE_LIST:
return state.set('list', action.data);
default:
return state
}
网友评论