React redux component props not updated after store update

Question

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.

Answer 1

I know this is almost two years old, but...

In your Reducer code: Object.assign() only performs a shallow copy. So your newState.airports array still points to the state.airports array.

That means that [newState.airports[0], newState.airports[1]] = [newState.airports[1], newState.airports[0]]; is mutating the state, preventing the view from updating .

Assuming your state.airports array has a depth of one and your state isn't further nested, try:

...
  const newState = {...state, airports: [...state.airports]};
...

You can read more here .