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.

0 Answers