如何添加拉动以用redux反应本地刷新

Question

我想添加拉动刷新，但我不知道从_refresh（）从_refresh（）呼叫什么。我在另一个页面中有动作，常数和还原器。我怎么能记住API。感谢提前的帮助。

我想添加拉动刷新，但我不知道从_refresh（）从_refresh（）打来什么。我在另一个页面中有动作，常数和还原器。我怎么能记住API。感谢提前的帮助。

class HomeworkList extends Component {
constructor(props){
  super(props);
  this.state = {
    getHW : null,
    refreshing: false,
    appState: AppState.currentState,
    months : ["Jan","Fev","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
  }
}
_onRefresh() {
    this.setState({refreshing: true});
  }
componentDidMount(){
   this.props.getHomework();
}

  render() {
    const {homework,isFetching} = this.props.homework;
    if(isFetching){
      return(
        <View>
          <ActivityIndicator
            color = '#bc2b78'
             size = "large"
            />
        </View>
      )
    }
    else{
      return (
         <ScrollView style={styles.container} refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
          />
        }>
         <View style={styles.filterView}>
           <View style={{flexDirection:'row'}}>
             <Icon size={20} name="ios-options" color="#000000" /><Text style={[{color:"#333333"},mainStyles.postTitle]}>  FILTER BY</Text>
           </View>
           <View>
             <ScrollView
               horizontal={true}
               showsHorizontalScrollIndicator={false}
               >
               {
                 this.state.months.map((item,i)=>{
                   return(
                     <TouchableHighlight key={i} style={styles.filterItem}  onPress={() => {}} underlayColor={"#de0000"}><Text >{item}</Text></TouchableHighlight >
                   )
                 })
               }
             </ScrollView>
           </View>
         </View>
           <View style={[styles.titleView,mainStyles.coloredBackground]}>
           <TouchableOpacity
             >
             <Text style={styles.title}>
               THIS MONTH
             </Text>
             </TouchableOpacity>
           </View>
           <View style={styles.viewPadding}>
           {
             homework.length ? (
               homework.map((item, index) => {
                 return(
                   <TouchableOpacity
                   onPress={() => this.props.navigate('Chat', { title: item })}
                     key={item.id}
                     >
                       <Text style={[styles.listItems,{borderColor:randomHex()}]}>
                         {item.date}
                       </Text>
                   </TouchableOpacity>
                 )
                 })
             ):null
           }
           </View>
         </ScrollView>
       );
    }
  }
}
function mapDispatchToProps(dispatch){
  return{
    getHomework: () => dispatch(fetchHomeworkFromApi()),
    getNaviagationName:()=>dispatch(getNaviagationName())
  }
}
function mapStateToProps(state){
  return{
    homework: state.homework
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(HomeworkList);

Answer 1

在刷新回调中派遣刷新操作。

然后，此操作应派遣任何其他数量的动作，例如fetchHomeworkFromApi和getFreshData。不要重新提出毫无意义的刷新的东西。

在您的还原器内部，请确保当新的数据到达时，它会替代旧数据。（避免将新数据附加到旧数据的情况）

Answer 2

非常简单，假设您在redux操作中定义了API调用，并与Redux Thunk连接，则类似于下面的

// Action.js
const reduxAction = () => {
  return async dispatch => {
    dispatch({ type: IS_LOADING });
    //Call backend API
    const result = axios.xxx();
    dispatch({ type: GOT_RESULT, payload: result });
  }
}

以上是来自Redux的标准API，与刷新无关。

现在，由于我们对组件有一个redux操作，并且您有刷新的控制，因此您需要更新`_

_onRefresh() {
    this.props.reduxAction();
}

至于您的RefreshControl，而不是使用LocalState，请使用Redux的加载状态，例如

<RefreshControl
  refreshing={this.props.refreshing} //Use the one from redux, not component state
  onRefresh={this._onRefresh.bind(this)}
/>