Реагировать на собственное состояние компонента обновления onPress Redux

Question

Мое приложение основано на expo, и я использую избыточность для обработки состояний. У меня возникла проблема, я хочу обновить состояние компонента onpress другого компонента. Как видно из приведенного ниже кода, у меня есть два компонента ItemGenerator и LoadCounter. ItemGenerator генерирует список элементов, которые могут быть нажаты. А LoadCounter просто возвращает значение счетчика, печатая его в текстовом представлении. Проблема в том, что когда я нажимаю на список, он обновляет значение счетчика в журнале, но состояние LoadCounter остается прежним. Но если я снова открываю экран, он обновляет состояние счетчика в LoadCounter. Я хочу обновить состояние LoadCounter при печати. Пожалуйста, помогите мне решить эту проблему:

List.js

 class List extends Component {
    render(){
        return(
            <View>
                <ItemGenerator />
                <LoadCounter counter={this.props.counter}/>
            </View>
        )
    }
}

function mapStateToProps(state) {
    return {
        counter: state.counter.counter
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
    }
}

export default connect(mapStateToProps)(List);

ItemGenerator.js

 class ItemGenerator extends Component {

    render() {
        return (
            <ScrollView>
                {
                    this.state.data.map((item, index) => {
                        return(<ItemList navigate={this.props.navigate} data={item} key={index}/>)
                    })
                }
            </ScrollView>
        )
    }

}

ItemList.js

class ItemList extends Component {
    render() {
        return(
            <View>
                <TouchableOpacity onPress={() => this.props.increaseCounter()}>
                    <Card containerStyle={{margin: 0}}>
                        <View style={{flex:1, flexDirection:'row', height:70, alignItems:'center', justifyContent:'space-between'}}>
                            <View style={{flexDirection:'row', alignItems:'center', width:'55%'}}>
                                <View style={{flexDirection:'column', marginLeft:10}}>
                                    <Text style={{...}}>{this.props.data.name}</Text>
                                </View>
                            </View>
                        </View>
                    </Card>
                </TouchableOpacity>
            </View>
        )
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
    }
}

export default connect(mapStateToProps)(ItemList);

counterReducer.js

const initialState = {
    counter: 1
}
const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREASE_COUNTER':
            return { counter: state.counter + 1 }
        case 'DECREASE_COUNTER':
            return { counter: state.counter - 1 }
    }
    return state
}

export default counterReducer;

LoadCounter.js

class LoadCounter extends Component {
    render(){
        return(
            <View>
                <Text>{this.props.counter}</Text>
            </View>
        )
    }
}