React Native component's props are not updating after the redux store updates. What's bugging me about this is that it used to do so, then one fine day, it stopped working.
Dispatch is working correctly, and the store is correctly updating state without mutating it.
I've tried returning a new object that has nothing to do with the old state, but still no luck. I've also tried using componentWillReceiveProps, but it won't get called.
Component
import React from 'react';
import { connect } from 'react-redux';
import { MonoText } from '../components/StyledText';
import { bindActionCreators } from 'redux';
import * as airportActions from '../../shared/redux/modules/airports';
class HomeScreen extends React.Component {
render() {
const { addAirports } = this.props;
return (
<View style={styles.container}>
<ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
<View>
<FlatList
horizontal={true}
data={this.props.airports.airports}
renderItem={({item}) => <Text>{item.key + " "}</Text>}
// extraData={this.state}
/>
</View>
<Button
onPress={() => this.props.switchAirports()}
title="SWITCH"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</ScrollView>
</View>
);
}
const mapStateToProps = (state) => {
const { airports } = state
return { airports }
};
const mapDispatchToProps = dispatch => (
bindActionCreators(airportActions, dispatch)
);
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);
Reducer
const SWITCH = 'airports/switch';
export default function reducer(state = INITIAL_STATE, action) {
switch (action.type) {
case SWITCH:
const newState = Object.assign({}, state);
[newState.airports[0], newState.airports[1]] = [newState.airports[1], newState.airports[0]];
return newState
default:
return state
}
};
export function switchAirports() {
return { type: SWITCH }
}
Combined Reducer
import { combineReducers } from 'redux';
import airports from './airports';
import galleryState from './gallery'
export default combineReducers({
galleryState,
airports,
});
When I click on the Toggle button, I expect that the 2 first airports get switched. They do in the store, and they'll be switched in the store after I click Switch again. But those state changes never reflect on the props of the component.
Again, this used to work, but it stopped working all of a sudden. Not only for this component, but for another one and another reducer as well.