how to add pull to refresh with redux react native

user_8323457 0
Viewed 2134

I wanna add pull to refresh but i dont know what to call from from _Refresh(). I have action, constants and reducers in another page. How can i recall the api. thanks for help in advance.

I wanna add pull to refresh but i dont know what to call from from _Refresh(). I have action, constants and reducers in another page. How can i recall the api. thanks for help in advance.

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);
redux react-native reactjs javascript
2 Answers

Dispatch a refresh action inside the refresh callback.

This action should then dispatch any number of other actions to "re fresh" like fetchHomeworkFromApi and getFreshData. Don't re-fetch things that make no sense to refresh.

Inside your reducers make sure that when fresh data arrives, it replaces the old. (Avoid situations where new data is appended to old data)

user_32380460

Very simple, assuming you have API call defined in your redux action, hooked up with redux thunk, something like below

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

    dispatch({ type: GOT_RESULT, payload: result });
  }
}

The above is the very standard API calling from redux, nothing to do with pull to refresh yet.

Now since we have a redux Action for our component, and that you have RefreshControl, you need to update your `_

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

As for your RefreshControl, instead of using localState, use the loading state from your redux, something like below

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