Refresh overview scene after changing state in another scene with react / redux / react-native-router-flex

Question

Most simplified working example provided in github !!!

I have a simple app to learn building apps with react native and redux. From my understanding if you display data from the redux state in your render method and then values of this state is changed, then the value will be changed as well and react rerenders all components which needs to be rerendered due to the state change.

I have the application available on github: https://github.com/schingeldi/checklist

Its really simple. I have an overview, if you click on the status of an entry, you get to a detailed page. If you click on "Mark xxx" the status in changed in the redux state (according to logs) but its not refreshed in the overview scene.

Basically I have an Overview.js:

class Overview extends Component {

    constructor(props) {
        super(props);
        this.state = {fetching:false};
    }

    entries() {
        // console.log("Overview");
        // console.log(this.props);
        // console.log(this.props.entries);


        return Object.keys(this.props.entries).map(key => this.props.entries[key]);
    }

    componentDidMount() {
        this.setState({fetching:true});
        this.props.actions.getEntries()
            .then( (res) => {
                this.setState({fetching: false});
            })
    }

    handleChange(entryId) {
        Actions.detail({id: entryId});
    }


    render() {

        return (
        <View>
            <ScrollView>
                { !this.state.fetching &&  this.entries().map((entry) => {

                    return (
                        <TouchableHighlight key={entry.id}>
                        <View  >
                            <Text>{entry.name}</Text>
                            <TouchableHighlight onPress={(entryId ) => this.handleChange(entry.id)}><Text>{entry.status}</Text></TouchableHighlight>
                            <Text>---------------------------</Text>

                        </View>
                        </TouchableHighlight>
                    )
                    }

                    )
                }
                {this.state.fetching ? <Text>Searching </Text> : null }
            </ScrollView>


        </View>
    )}
}

function mapStateToProps(state) {

    return {entries: state.default.entries };
}

function mapDispatchToProps(dispatch) {
    return {actions: bindActionCreators(actions,dispatch)};
}

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

When clicking on the Status ( {entry.status} ) I open another Scene Details.js:

class Detail extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    componentWillMount() {
        this.setState({
            entry: this.props.entries[this.props.id]
        })
    }

    patchEntry(newStatus) {
        console.log("Details: patchEntry with " + this.props.id +" and " + newStatus );
        this.props.actions.patchEntry(this.props.id, newStatus);
    }

    render() {
        return (
            <View>
                <Text>{this.state.entry.name}</Text>

                <TouchableHighlight onPress={() => this.patchEntry('done')}><Text>Mark done</Text></TouchableHighlight>
                <TouchableHighlight onPress={() => this.patchEntry('cancelled')}><Text>Mark cancelled</Text></TouchableHighlight>
            </View>
        )
    }
}



function mapStateToProps(state) {
    console.log(state);
    return {entries: state.default.entries };
}


function mapDispatchToProps(dispatch) {
    return {actions: bindActionCreators(actions,dispatch)};
}

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

And I have an action and a reducer which are called perfectly fine when one of the TouchableHighlights are pressed. I even see in the logs that the state is changed when outputting the whole state.

But my question is, how do I get the status refreshed on the Overview scene, once I got back (pop) from the Detail scene?

If you need anymore information let me know, but it should be simple to reproduce as I wrote a whole working app. Just clone, npm install and run it.

Thanks a lot for your help.

Answer 1

I did a quick look into your code and here are some suggestions/information.

In you Detail.js file you're setting your state once the component is mounted. When you update your redux store and get the refreshed props, it won't update your UI because it's reflecting your state, and your state won't get the new value because you're only setting it on componentWillMount method. Check more information here in the docs.

Also it seems it's not very clear for you when to use the React component's state. In this example, from Detail.js file you don't need the component's state at all. You can compute that value directly from the properties.

Ex:

render() {
  const entry = this.props.entries[this.props.id];
  return (
    <View>
      <Text>{entry.name}</Text>

      <TouchableHighlight onPress={() => this.patchEntry('done')}><Text>Mark done</Text></TouchableHighlight>
      <TouchableHighlight onPress={() => this.patchEntry('cancelled')}><Text>Mark cancelled</Text></TouchableHighlight>
    </View>
  )
}

You could even do that inside your mapStateToProps function. More info here.

Ex:

function mapStateToProps(state, ownProps) {
  return {
    entries: state.default.entries,
    entry: state.default.entries[ownProps.id],
  };
}

It seems your Overview.js file is OK regarding the UI being updated, because it's render method is reflecting the props and not it's state.

UPDATE 06/27

I've just checked your reducers and you may have some fixes to do there as well.

case ENTRY_PATCHING:
  let patchedEntries = state.entries;
  patchedEntries[action.data.entryId].status = action.data.newStatus;

  return {...state,
    entries: patchedEntries
  }

In this reducer you're mutation your state, and you must not do that. The redux store can't be mutated. You can check more details about it here http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html

So, fix example:

case ENTRY_PATCHING:
  const patchedEntry = {
    ...state.entries[action.data.entryId],
    status: action.data.newStatus
  }

  return {
    ...state,
    entries: {
      ...state.entries,
      [action.data.entryId]: patchedEntry,
    }
  }