Соединение не обновляется, когда состояние изменяется на реакции-нативной с редуксом

Question

Уже 5 часов у меня проблема, но она определенно не хочет работать ...

Я хотел бы отправить событие, когда onScroll обнаружен на моем домашнем компоненте, и получить статус"true" или "false" в моем компоненте TopNavigation

Пока мой редуктор работает хорошо (с console.log (nextState) до рендеринга), но у меня сложилось впечатление, что соединение не работает с connect (mapStatetoProps) (TopNavigation), поскольку мой компонент не выполняет повторную визуализацию

Спасибо за ваши ответы

//TopNavigation

import React from 'react'
import { connect } from 'react-redux'


class TopNavigation extends React.Component {
    constructor(props) {
        super(props)
    }


    componentDidMount() {
        console.log(this.props.scrollData)
    }
}

// Render things...

const mapStatetoProps = (state) => {
    return {
        scrollData: state.scrollData
    }
}

export default connect(mapStatetoProps)(TopNavigation)

// Home

import React from 'react'
import { StyleSheet, View, FlatList } from 'react-native'
import gStyles from '../../../Styles/global'
import { connect } from 'react-redux'

// Partials
import ItemBox from '../../Partials/ItemBox'
import TopNavigation from '../../Partials/TopNavigation'

// Data
import recetteData from '../../../api/recetteData'


class Home extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <View style={styles.mainContainer}>
                <FlatList
                    data={recetteData}
                    keyExtractor={(item) => item.id.toString()}
                    onPress={() => this._toggleSet()}
                    renderItem={({ item }) => <ItemBox item={item} />}
                    onScroll={(event) => this.props.dispatch({ type: "POSITION", value: event.nativeEvent.contentOffset.y })}
                    style={styles.flatListContainer} />
                <TopNavigation />
            </View>
        )
    }
}

export default connect(mapStateToProps)(Home)

//ScrollData Reducer

const initialState = {
    scrollData: {
        scrolled: false
    }
}

function scrollData(state = initialState, action) {
    let nextState
    switch (action.type) {
        case 'POSITION':
            if (action.value > 0) {
                nextState = {
                    ...state,
                    scrollData: {
                        ...state.scrollData,
                        scrolled: true,
                    },
                }
            }
            else {
                nextState = {
                    ...state,
                    scrollData: {
                        ...state.scrollData,
                        scrolled: false
                    },
                }
            }
            return nextState.scrollData.scrolled
        default:
            return state
    }
}

export default scrollData

//ConfigureStore

import { createStore } from 'redux';
import buttonPreference from './Reducers/buttonPreference'
import scrollData from './Reducers/scrollData'


export default createStore(/*buttonPreference,*/scrollData)

На консоли (console.log componentDidMountof TopNavigation):

Object {"scrolled": false,}

Но без изменений при прокрутке

Вот мой package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.6",
    "react": "^16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.1.tar.gz",
    "react-native-elevated-view": "0.0.6",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-paper": "^2.12.0",
    "react-native-responsive-dimensions": "^2.0.1",
    "react-navigation": "^2.0.1",
    "react-navigation-material-bottom-tabs": "^0.4.0",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "react-test-renderer": "^16.6.0-alpha.8af6728",
    "schedule": "^0.4.0"
  },
  "private": true
}

Обновление

Установка TopNavigation:

//TopNavigation

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

    componentDidUpdate(prevProps) { // Instead of componentDidMount
        if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
            console.log(this.props.scrollData);
            this.setState({ scrolledState: this.props.scrollData });
        }
    }

Но это все равно не работает, ни событие, ни изменение состояния ...

Обновление 2

В магазине вроде или нормально работает, проблемаБолее точно, это то, что он не обновляет в реальном времени компонент.

Если я заполняю хранилище, я успокаиваюсь и возвращаюсь на страницу с помощью навигации, данные хорошо меняются.

реальный вопрос заключается в том, почему компонент не обновляется в режиме реального времени с новыми данными магазина, передаваемыми редуктором ...

обновление 3

Экспо в производственном режиме решенопроблема ...

Answer 1

Звучит как ошибка со средой.Я запустил Экспо в производственном режиме, и он решил проблему.

В папке .expo

//setting.json

{
  "hostType": "lan",
  "lanType": "ip",
  "dev": false, // false for production env
  "minify": false,
  "urlRandomness": "53-g5j"
}

Я надеюсь, что это может помочь, но было бы желательно иметь возможность продолжить работу в режиме разработки...

Я сообщаю об ошибке на expo github

Answer 2

Вы сделали все правильно по большей части. Проблема в вашем файле TopNavigation. Здесь следует иметь в виду две важные вещи:

1. componentDidMount() вызывается только один раз , когда ваш компонент отображается в первый раз. Таким образом, даже если ваш connect работает правильно, вы не получите более одного вызова этой функции. Чтобы проверить, правильно ли обновляются ваши реквизиты, вы можете указать console.log() внутри componentDidUpdate() следующим образом:

    componentDidUpdate(prevProps) {
        if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
            console.log(this.props.scrollData);
        }
    }
   

2. Также имейте в виду, что это не вызовет повторную визуализацию вашего компонента. Компонент перерисовывается только при изменении state компонента. Вы можете использовать это изменение в своих реквизитах, чтобы вызвать изменение состояния, которое снова вызовет функцию render, чтобы запустить повторную визуализацию вашего компонента, как показано ниже:

   state = {scrolledState: false};
   
   ...
   ...
   
   componentDidUpdate(prevProps) {
       if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
           // console.log(this.props.scrollData);
           this.setState({scrolledState: this.props.scrollData});
       }
   }
   

Надеюсь, это поможет!

Answer 3

Предыдущий ответ был верным.Но чтобы заставить код работать, попробуйте следующий подход:

class Home extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      scrolling: false;
    }
}

makeScroll = (event) => {
  this.props.dispatch({ type: "POSITION", value: event.nativeEvent.contentOffset.y 
  });
  setTimeout(() => this.setState({scrolling: true}), 150);
}

render() {
    return (
        <View style={styles.mainContainer}>
            <FlatList
                data={recetteData}
                keyExtractor={(item) => item.id.toString()}
                onPress={() => this._toggleSet()}
                renderItem={({ item }) => <ItemBox item={item} />}
                onScroll={(event) => this.makeScroll(event)}
                style={styles.flatListContainer} />
            <TopNavigation />
        </View>
    )
 }
}

export default connect(mapStateToProps)(Home)

Вместо прямой отправки при событии onScroll.Передайте его в функцию и измените локальное состояние внутри этого после отправки.