connect（）はコンポーネント

を再レンダリングしません。コンポーネントはRedux storeを変更するアクションを送出し、他のコンポーネントは変更された状態をpropsおよびrerenderにする必要があります。connect（）はコンポーネント

問題は、コンポーネントが小道具を取得し、それらが正しく修正されているが、コンポーネントが再レンダリングされないことです。

誰かが助けてもらえますが、あまりそれはhttpリクエスト、を行い、状態が変更されたときに再描画する必要がありマウント..に

Component who uses store:

を立ち往生されて。

class CalendarView extends Component { 

componentDidMount() { 
    axios.get('http://localhost:3000/api/bookings/get') 
    .then(foundBookings => { 
    this.props.getBookings(foundBookings); 
    }) 
    .catch(e => console.log(e)) 
} 

render() { 
    return (
    <Agenda 
    items={this.props.items} 
    selected={this.props.today} 
    maxDate={this.props.lastDay} 
    onDayPress={this.props.setDay} 
    renderItem={this.renderItem} 
    renderEmptyDate={this.renderEmptyDate} 
    rowHasChanged={this.rowHasChanged} 
    /> 
); 
} 

renderItem = (item) => { 
    return (
    <View style={[styles.item, { height: item.height }]}> 
     <Text>Name: {item.name} {item.surname}</Text> 
     <Text>Time: {item.time}</Text> 
    </View> 
    ); 
} 

renderEmptyDate =() => { 
    return (
    <View style={styles.emptyDate}><Text>This is empty date!</Text></View> 
    ); 
} 

rowHasChanged = (r1, r2) => { 
    console.log('hit') 
    return true; 
} 

} 

const mapStateToProps = (state, ownProps) => { 
return { 
    today: state.app.today, 
    lastDay: state.app.lastDay, 
    items: state.app.items 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
return { 
    setDay: date => dispatch(appActions.setSelectionDate(date.dateString)), 
    getBookings: data => dispatch(appActions.getBookings(data)), 
    } 
} 

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

Action Dispatching:

必要に応じて、状態

onSubmit = (name, surname, selectionDate, selectionTime) => { 
    axios.post('http://localhost:3000/api/bookings/create', { 
    bookerName: name, 
    bookerSurname: surname, 
    bookerTime: selectionTime, 
    date: selectionDate 
    }).then(savedBookings => { 
    this.props.createBooking(savedBookings); 
    this.props.navigator.pop({ 
     animationType: 'slide-down', 
    }); 
    }).catch(e => console.log(e)) 
} 

const mapStateToProps = state => { 
//... 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    createBooking: data => dispatch(appActions.createBooking(data)) 
    } 
} 

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

Reducer:

case types.CREATE_BOOKING: { 
    const { date , bookings } = action.savedBookings.data; 
    let dateArr = state.items; 
    // formatting a booking how needed 
    Object.keys(dateArr).forEach(key => { 
    if (key == date) { 
     dateArr[key] = []; 
     bookings.map(oneBooking => { 
     dateArr[key].push({ 
      name: oneBooking.bookerName, 
      surname: oneBooking.bookerSurname, 
      time: oneBooking.bookerTime, 
      height: Math.max(50, Math.floor(Math.random() * 150)) 
     }); 
     }) 
    } 
    }); 
    return { 
    ...state, 
    items: dateArr 
    }; 
}

完全レポを修正アクションをディスパッチ：https://github.com/adtm/tom-airbnb/tree/feature/redux

ありがとうございます！

出典

2017-10-03 Tomas Eglinskas