八十六、推荐组件的redux-thunk异步解决方案、Ajax获取推荐数据

2020/11/22、 周日、今天又是奋斗的一天。

@Author:Runsen

今天我们来看一个 Redux 官方出品的 middleware 库:redux-thunk

Redux官方实现的异步解决方案----Redux-Thunk

Redux-Thunk和前面写过的ReduxReact-Redux其实都是Redux官方团队的作品,他们的侧重点各有不同:

Redux:是核心库,功能简单,只是一个单纯的状态机,但是蕴含的思想不简单,是传说中的“百行代码,千行文档”。

React-Redux:是跟React的连接库,当Redux状态更新的时候通知React更新组件。

Redux-Thunk:提供Redux的异步解决方案,弥补Redux功能的不足。

比如,当我聚焦的时候,推荐组件需要出现,搜索框需要拉长。这里涉及了两种函数,需要使用redux-thunk异步。

安装redux-thunk:cnpm install redux-thunk

import {createStore,compose, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
// reduxredux中的高级用法 引入redux-thunk 异步
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer,composeEnhancers(
  applyMiddleware(thunk)
))
export default store;

index.js代码如下。

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

class Header extends Component{

  getListArea() {
    const {focused, list} = this.props
    if (focused) {
      return (
      <SearchInfo>
      <SearchInfoTitle>
        热门搜索
        <SearchInfoSwitch>换一批</SearchInfoSwitch>
      </SearchInfoTitle>
        <SearchInfoList>
          {list.map((item) => {
            return <SearchInfoItem key={item}> {item} </SearchInfoItem>
          })}
        </SearchInfoList>
      </SearchInfo>
      )
    }else{
      return null
    }
  }


  render() {
    const {focused, handleInputFocus,handleInputBlur} = this.props
    return (
      <HeaderWrapper>
        <Logo></Logo>
        <Nav>
          <NavItem className='left active'>首页</NavItem>
          <NavItem className='left'>下载App</NavItem>
          <NavItem className='right'>登录</NavItem>
          <NavItem className='right'>
            <i className="iconfont">&#xe636;</i>
          </NavItem>
          <SearchWrapper>
            <CSSTransition
              in={focused}
              timeout={200}
              classNames="slide"
            >
              <NavSearch
                className={focused ? 'focused' : ''}
                onFocus={handleInputFocus}
                onBlur={handleInputBlur}
              ></NavSearch>
            </CSSTransition>
            {/* vscode快捷键Ctrl + Shift + L */}
            <i className={focused ? 'focused iconfont' : 'iconfont'}>&#xe60c;</i>
            {this.getListArea()}
          </SearchWrapper>
        </Nav>
        <Addition>
          <Button className='writting'>
            <i className="iconfont">&#xe678;</i>&nbsp;
               写文章</Button>
          <Button className='reg'>注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }
}



const mapStateToProps = (state) => {
  return {
    // state.getIn是immutable fromJS的用法 相当于 
    // state.get('header').get('focused')
    focused: state.getIn(['header','focused']),
    list: state.getIn(['header','list'])
  }
}

const mapDispathToProps = (dispatch) => {
  return {
    handleInputFocus() {
      dispatch(actionCreators.getList());
      dispatch(actionCreators.searchFocus());
    },
    handleInputBlur() {
      dispatch(actionCreators.searchBlur());
    }

  }
}

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

Ajax获取推荐数据

在actionCreators中有一个getList,来获取推荐数据。我们需要使用Ajax获取推荐数据。

React 只是使用 props 和 state 两处的数据进行组件渲染。

个人推荐 axios,这也是本文所使用的。不过,认真的说,如果你偏偏不喜欢它,那就选其他的呗,比如Promise。

安装:cnpm install axios --save

import * as constants  from './constants'
import axios from 'axios'
import {fromJS} from 'immutable'

export const searchFocus = () =>({
  type: constants.SERACH_FOCUS
})

export const searchBlur = () =>({
  type: constants.SERACH_BLUR
})

const changList = (data) => ({
  type: constants.CHANGR_LIST,
  // fromJS处理
  data: fromJS(data)
})

export const getList = () =>{
  return (dispatch) => {
    axios.get('/api/headerList.json').then((res) => {
      const data = res.data
      dispatch(changList(data.data))
    }).catch(()=>{
      console.log('error')
    })
  }
}

import * as constants  from './constants'
import {fromJS} from 'immutable'

const defaultState =  fromJS({
  focused: false,
  list: []
});

// eslint-disable-next-line import/no-anonymous-default-export
export default (state = defaultState, action) => {
  // eslint-disable-next-line default-case
  switch(action.type) {
    case constants.SERACH_FOCUS : return state.set('focused',true);
    case constants.SERACH_BLUR :  return state.set('focused',false);
    case constants.CHANGR_LIST : return state.set('list',action.data)
  }
  return state;
}
刘润森! CSDN认证博客专家 Python Java 前端
17年就读于东莞XX学院化学工程与工艺专业,GitChat作者。Runsen的微信公众号是"Python之王",因为Python入了IT的坑,从此不能自拔。公众号内容涉及Python,Java计算机、杂谈。干货与情怀同在。喜欢的微信搜索:「Python之王」。个人微信号:RunsenLiu。不关注我公号一律拉黑!!!
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值