简书 Ajax获取推荐数据

我们要扩展header，所以还是要把Header组件还原成无状态组件

然后我们把绑定在列表上的getListArea放在Header组件内部，此时的index.js代码：

import React, {Component} from 'react';
import {CSSTransition} from "react-transition-group";
import {connect} from "react-redux";
import * as actionCreators from './store/anctionCreators'
import {
  HeaderWrapper, Logo, Nav,NavItem,NavSearch,Addition,Button,SearchWrapper,SearchInfo,SearchInfoTitle,SearchInfoSwitch,
  SearchInfoItem,SearchInfoList
} from './style'

class Header extends Component{

  getListArea(show){
    if(show){
      return (
        <SearchInfo>
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch>换一批</SearchInfoSwitch>

            <SearchInfoList>
              <SearchInfoItem>111</SearchInfoItem>
              <SearchInfoItem>111</SearchInfoItem>
              <SearchInfoItem>111</SearchInfoItem>
              <SearchInfoItem>111</SearchInfoItem>
              <SearchInfoItem>111</SearchInfoItem>
            </SearchInfoList>

          </SearchInfoTitle>
        </SearchInfo>
      )
    }else{
      return null
    }
  }

  render(){
    return (
      <div>
        <HeaderWrapper>
          <Logo/>
          <Nav>
            <NavItem className='left'>首页</NavItem>
            <NavItem className='left'>下载APP</NavItem>
            <NavItem className='right'>
              <i className='iconfont'>&#xe636;</i>
            </NavItem>
            <NavItem className='right'>登录</NavItem>

            <SearchWrapper>
              <CSSTransition timeout={200} in={this.props.focused} classNames='slide'>
                <NavSearch
                  className={this.props.focused ?'focused':''}
                  onFocus={this.props.handleInputFocus}
                  onBlur={this.props.handleInputBlur}
                ></NavSearch>
              </CSSTransition>
              <i className={this.props.focused ?'focused iconfont':'iconfont'}>&#xe617;</i>

              {this.getListArea((this.props.focused))}

            </SearchWrapper>
          </Nav>

          <Addition>
            <Button className='writing'>
              <i className='iconfont'>&#xe600;</i>
              写文章
            </Button>
            <Button className='reg'>注册</Button>
          </Addition>

        </HeaderWrapper>
      </div>
    );
  }
}

const mapStateToProps=(state)=>{
  return{
    focused:state.get('header').get('focused')
  }
}
const mapDispathToProps=(dispatch)=>{
  return{
    handleInputFocus(){
      dispatch(actionCreators.searchFocus())
    },
    handleInputBlur(){

      dispatch(actionCreators.searchBlur())
    }
  }

}

export default connect(mapStateToProps,mapDispathToProps)(Header);

安装redux-thunk

yarn add redux-thunk

如何使用redux-thunk呢？

我们应该在onfouc的时候获取ajax数据，然后onfocus绑定的事件是handleInputFocus，在mapDispathToProps里，用dispatch的方式发送出去，我们不会把ajax数据放在组件里，我们放在action里。如何把action和我们的store联系起来，之前用的是dispatch，现在做一个升级，就是redux-thunk，那应该写在哪呢，写在创建store的时候，就是总的store里的index.js：

 这样的话我们就可以使用redux-thunk了~~

接下来我们在header目录下的index.js里派发一个action，然后创建一个getList的方法：

 我们在anctionCreators里加上这个函数：

然后让他在聚焦时，打印123，发现可以：

 接下来我们来写ajax的请求，借用axios，安装它：

yarn add axios

然后在anctionCreators里引入，以及发送请求：

成功了就执行then，失败了就执行catch

 

因为目前没有这个接口，所以返回404和失败。所以我们写一个假的，在public目录下建一个api的文件夹，然后在此文件夹下创建一个headerList.json的接口，如下图，拿到数据了

 我们现在已经能用ajax发送请求了，并且接受数据，我们应该把接受的这些数据替换掉reducer里的空数组，那么如何把这些数据放进store里。额不更了，学不懂、