6. Bug Fix以及前期总结

修复1个简单bug，在Android手机里因为有Back按键，所有需要特殊处理，直接贴代码如下：
修改app/navigation/index.js添加如下代码

componentWillMount() {
    if (Platform.OS === 'android') {
      BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }

  componentWillUnmount() {
    if (Platform.OS === 'android') {
      BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }
  }

  onBackAndroid = () => { return Actions.pop()}

其实就是绑定一个事件处理而已，如果应用原生Nav的话，一般要在pop的时候判断栈长度是否为0也即是否在首页，不然会错处，原生Android返回键是退出应用。另外这里的Platform.OS不判断也可以的，以为IOS实现为空，无所谓的，这里写出来只是顺便介绍Platform。

另外修改了部分代码以实现分页查找：
修改了app/home/index.js

render() {
    const {isFetching, movies} = this.props;

    if (isFetching && !movies.subjects) {
      return <Loading />
    }

    this.state.data = this.state.data.concat(movies.subjects)

    return (        
        <ListView dataSource={this.state.dataSource.cloneWithRows(this.state.data)} renderRow={this._renderRow.bind(this)}
          enableEmptySections={true}
          onEndReached={this._handleLoadMore.bind(this)} 
          onEndReachedThreshold={10}
          initialListSize={2}
          refreshControl={
            <RefreshControl
              refreshing={isFetching}
              onRefresh={this._onRefresh.bind(this)}
              color="#8CD790"
            />
          }
          renderFooter={() => this.props.hasMore ? <LoadMore active={this.props.isFetching}/> : null }
          renderHeader={() => {
            return (
              <View style={styles.listViewTitle}>
                  <Text>{movies.title}</Text>
              </View>
            )
          }}
        />        
    );
  }

添加下拉刷新refreshControl组件以及上拉加载下一页：

onEndReached={this._handleLoadMore.bind(this)} 
onEndReachedThreshold={10}
//对应如下函数
_onRefresh() {
    // 刷新
    const {dispatch} = this.props;
    this.state.data = [];
    dispatch(fetchMovies())
  }
  _handleLoadMore() {
    // 加载更多
    if (this.props.hasMore) {
      const {dispatch, movies} = this.props;
      let start = movies.start + movies.count;
      dispatch(fetchMovies(start))
    }
    
  }

app/home/reducer.js

export function moviesReducer (
    state={
        isFetching: true,
        hasMore: true,
        movies: {}
    }, action
) {
    switch (action.type) {
        case REQUEST_MOVIES:
            
            return Object.assign({}, state, {
                isFetching: true,
            })
        case RECEIVE_MOVIES:
            const {movies} = action;
            return Object.assign({}, state, {
                movies: action.movies,
                isFetching: action.isFetching,
                hasMore: (movies.start + movies.count) < movies.total
            })
        default: 
            return state
    }
}

简单处理了一下，不够严格，请依据实际业务自行修改。

还存在一些bug，有时间在整吧。写到这里其实剩下的工作就很简单了，蓝图已画好，只需要根据需要的颜色按需涂上即可，先根据自己的业务分解action，定义constant，分发函数reducer，组件渲染然后connect到store，写style，ok一个功能完成，就是这么简单。
另外如果组件页面变多，功能比较复杂，其实还可以优化，从前面的代码也可以看出，很多代码其实都是相似的，这里这么写只是可以更好的了解redux，程序员当然是最懒的那一类人了，github上还有很多组件可以节省代码时间，比如redux-actionshttps://github.com/acdlite/redux-actions可以生成具有一定规范的action，这样就可以节省很多代码了，诸如此类就不一一举例了。
最后不要忘了test，测试用例还是要写的，不要以为像这样分割的代码就不好测试了，应用了redux之后写测试反而会变得简单了，因为都是函数，各种js测试工具都是可以用的，比如mock等等，github上有很多测试第三方组件，搜一搜就是了。redux的另一特点就是可以时间旅行，比如可以回溯state重新测试、还可以在state里添加时间描述来测试性能，可以recordstate时间流来进行压力测试等等。（其实我没有实践过，不对的话当我瞎说。。）