5. ListView应用

ListView大概是所有移动应用都会用到的组件了,大部分都在首页,这章结合redux来看如何从API取数据再到如何应用redux更新渲染组件ListView


书写redux模式的异步请求API
  • 新建app/comon/api.js,这里随便找的豆瓣电影的API做测试用,API接口详情请查看
'use strict'

const ApiHost = 'http://api.douban.com/v2/movie'

export default {
    comming: `${ApiHost}/coming_soon`
}
  • 新建app/home/constant.js,action常量
export const REQUEST_MOVIES = 'request_movies';
export const RECEIVE_MOVIES = 'receive_movies';
  • 新建app/home/action.js,action一般在这里请求API做数据封装
'use strict'

import Api from '../common/api'
import Util from '../common/util'

import {
    REQUEST_MOVIES, RECEIVE_MOVIES
} from './constant';

export function fetchMovies() {
    return dispatch => {
        // dispatch(fetchMovies())
        fetch(Api.comming).then(ret => ret.json()).then((ret) => {
            dispatch(receiveMovies(ret))
        })
    }
}

function fetchingMovies() {
    return {
        type: REQUEST_MOVIES,
        isFetching: true,
    }
}

function receiveMovies(ret) {
    console.log('receive:',ret)
    return {
        type: RECEIVE_MOVIES,
        isFetching: false,
        movies: ret
    }
}

可以看出只是在调用异步fetchdispatch我们真正要处理的函数,这样就可以延迟函数做到异步,这里尤其要注意fetchMovies函数是同步的,如果要异步执行,把fetch返回即可,这里没有是以为没有必要,什么时候返回异步取决于你的业务以及你的state的设计。

  • 新建app/home/reducer.js,分发action
'use strict'

import {
    REQUEST_MOVIES, RECEIVE_MOVIES
} from './constant'

export function moviesReducer (
    state={
        isFetching: true,
        movies: {},
    }, action
) {
    switch (action.type) {
        case REQUEST_MOVIES:
            
            return Object.assign({}, state, {
                isFetching: true,
            })
        case RECEIVE_MOVIES:
            return Object.assign({}, state, {
                movies: action.movies,
                isFetching: action.isFetching
            })
        default: 
            return state
    }
}

初始化state里有2个属性,isFetching表示正在请求数据,此时应在主页面显示loadingmovies是请求API获得的数据,方法体就是一个普通的switch函数,不是一定要这样写,只要能正确处理返回即可,只有2点要求,修改state时一定不能修改原来的state,而是要返回新的,这里使用了Object.assign()函数方便处理,也可以使用ES语法新特性{...};另外一定要保证default时返回旧的state即可。

  • 修改app/reducer.js,将新的reducer连接到主干上
import { combineReducers } from 'redux';
import route from './route';
import {moviesReducer} from './home/reducer';

export default appReducers = combineReducers({
    route,
    moviesReducer,
    // other reducer
})
  • 修改app/home/index.js,主要逻辑调用
import React, {
  PropTypes,
} from 'react';

import {
  View,
  ScrollView,
  Text,
  Image,
  ListView,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

import {connect} from 'react-redux'
import {Actions} from 'react-native-router-flux'

import {fetchMovies} from './action'
import Loading from '../components/loading'
import Util from '../common/util'

class Home extends React.Component {
  constructor(props) {
    super(props);

    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  
    this.state = {
      dataSource: ds
    };
  }
  componentDidMount() {
    const {dispatch} = this.props;
    dispatch(fetchMovies())
  }
  render() {
    console.log('render:',this.props)
    const {isFetching, movies} = this.props;

    if (isFetching) {
      return <Loading />
    }

    return (
      
      <ScrollView>
        <View style={styles.listViewTitle}>
          <Text>{movies.title}</Text>
        </View>
        <ListView dataSource={this.state.dataSource.cloneWithRows(movies.subjects)} renderRow={this._renderRow.bind(this)}
          enableEmptySections={true}
          bounces={false}
          showsVerticalScrollIndicator={false}/>        
      </ScrollView>
    );
  }
  _renderRow(row) {
    const directors = row.directors;
    return (
      <TouchableOpacity style={styles.movieItem} onPress={() => Actions.detail({url: row.alt})}>
          <View style={styles.movieAvatar}>
            <Image source={{uri: row.images.large}} style={styles.avatarImage}/>
          </View>
          <View style={styles.movieInfo}>
            <Text style={styles.movieTitle}>{row.original_title}</Text>
            <Text>{row.genres.join(',')}</Text>
            <Text>{row.pubdates}</Text>
            <Text>导演:</Text>
            {directors.map((v, key) => {return (<Text key={key}>{v.name}</Text>)})}
            <Text style={{marginTop: 12}}>主演:</Text>
            <Text>{row.casts.map((v, key) => {return v.name}).join('/')}</Text>
          </View>
      </TouchableOpacity>
    )
  }
}

Home.propTypes = {};

Home.defaultProps = {};

const styles = StyleSheet.create({
  outerContainer: {
        flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    },
  listViewTitle: {
    flex: 1,
    alignItems: 'center',
  },
  movieItem: {
    padding: 12,
    flex: 2,
    flexDirection: 'row',
  },
  avatarImage: {
    width: Util.window.width/2 - 15,
    height: Util.window.height/3,
  },
  movieInfo: {
    paddingLeft: 12,
  },
  movieTitle: {
    fontSize: 18,
    color: '#8CD790',
    width: Util.window.width/2 -12,
    marginBottom: 15,
  }
})

function mapStateToProps(state) {
  return {
    ...state.moviesReducer
  }
}

export default connect(mapStateToProps)(Home)

这里需要注意的地方比较多:

  1. 调用action要使用dispatch
  2. const {isFetching, movies} = this.props;这个虽然在代码里没有显示声明,这是redux帮我们注入的
  3. ListViewdataSource要使用clone,这就像写C语言,不能随意修改指针一样的道理
  4. connect函数是redux提供的关键函数,详细请参考官方文档mapStateToProps的返回即redux需要注入的state,是要公开的属性,取决于你的state结构的设计,比如这里的dataSource由于是在组件内部使用,就没必要暴露给外界了
  5. 点击某个电影条目跳转到详情,为了简便起见,这里直接新建了一个detail.js内部使用WebView直接显示网页,实际效果图:

Screenshot_20160626-131807.png

Screenshot_20160626-132125.png

github代码地址v0.0.3

todo:添加Android手机Back事件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOS技术杂谈

iOS多线程——你要知道的NSOperation都在这里你要知道的iOS多线程NSThread、GCD、NSOperation、RunLoop都在这里

你要知道的iOS多线程NSThread、GCD、NSOperation、RunLoop都在这里 转载请注明出处 https://cloud.tencent.co...

41550
来自专栏Rgc

requests模块报错:Use body.encode('utf-8') if you want to send it encoded in UTF-8.

在做 企业向微信用户个人付款  功能时,调用第三方sdk,在 进行 requests 的post请求时,

35610
来自专栏白驹过隙

ZeroMQ - 三种模型的python实现

631140
来自专栏圣杰的专栏

Asp.net mvc 知多少(二)

本系列主要翻译自《ASP.NET MVC Interview Questions and Answers 》- By Shailendra Chauhan,想...

23180
来自专栏葡萄城控件技术团队

七天学会ASP.NET MVC (三)——ASP.Net MVC 数据处理

? 第三天我们将学习Asp.Net中数据处理功能,了解数据访问层,EF,以及EF中常用的代码实现方式,创建数据访问层和数据入口,处理Post数据,以及数据验...

366100
来自专栏Felix的技术分享

《一个操作系统的实现》笔记(5)--内核雏形

21640
来自专栏YG小书屋

ElasticSearch 5.6源码解析HTTP/TCP请求

56830
来自专栏pangguoming

终极解决方案:org.apache.jasper.JasperException: java.lang.IllegalStateException: getOutputStream() has alr

org.apache.jasper.JasperException: java.lang.IllegalStateException: getOutputStr...

25810
来自专栏我和PYTHON有个约会

Django来敲门~第一部分【5.1.项目配置settings.py详解】

我们创建好了一个Python项目(mysite/)之后,需要在项目中添加模块应用(polls/),在模块应用中添加处理功能逻辑,如添加模块中的视图处理函数(po...

11930
来自专栏恰童鞋骚年

自己动手写工具:百度图片批量下载器

开篇:在某些场景下,我们想要对百度图片搜出来的东东进行保存,但是一个一个得下载保存不仅耗时而且费劲,有木有一种方法能够简化我们的工作量呢,让我们在离线模式下也能...

52110

扫码关注云+社区

领取腾讯云代金券