#react-native #react-redux #user-experience #react-native-ble-plx
#react-native #react-redux #пользовательский интерфейс #react-native-ble-plx
Вопрос:
В моем приложении у меня есть функция, которая каждые 2 секунды вызывает команду Bluetooth, чтобы запросить текущую температуру устройства с помощью функции setInterval.
Ответ Bluetooth выдается контролируемой функцией. Для этого я использую библиотеку react native-ble-plx. У меня нет проблем с этим процессом.
Температура возвращается через свойство, которое отправляется через redux в файле действий. Но когда я «отправляю» (через redux) функцию на свой экран, у меня возникает короткое прерывание, которое вызывает запаздывающее / прерывистое поведение. В моем случае у меня есть слайд для разблокировки кнопки, и на моем устройстве при вызове отправки операция касания прерывается и становится не интуитивно понятной и раздражающей. Трудно объяснить проблему, но мой вопрос прост: как я должен настроить react-redux так, чтобы он не зависал или не прерывал текущее взаимодействие с пользователем при отправке redux?
Мое приложение основано на этой структуре проекта (для react-redux с Ble): https://github.com/momolarson/BLEServiceDiscovery
Окружающая среда: react-native: 0.63.3
react-native-ble-plx: 2.0.2
react-redux: 7.2.1
Это псевдокод моего приложения (код более длинный, но я исключил все остальные, удалив их) :
HomeScreen.js
import stuff[...]
class HomeScreen extends Component {
componentDidMount() {
this.timer = setInterval(() => {
this.props.readTemp();
}, 2000);
}
render() {
const { value } = this.state
return (
<>
<ScrollView>
<Text>{this.props.temperatture}"></Text>
<Slide2Unlock/>
</ScrollView>
</>
);
}
}
function mapStateToProps(state) {
return {
temperature: state.temperature,
};
}
const mapDispatchToProps = dispatch => ({
readTemp: () => bluetooth.readTemp(),
})
export default connect(mapStateToProps, mapDispatchToProps())(HomeScreen);
файл действий redux: actionBt.js (мой файл основан на этом https://github.com/momolarson/BLEServiceDiscovery/blob/master/actions/index.js )
[...]
device.monitorCharacteristicForService(
characteristicData.serviceUUID,
characteristicData.uuid,
(error, characteristic) => {
if (characteristic != null amp;amp; characteristic.value != null) {
dispatch(formatTemperature(characteristic.value));
}
},
);
спасибо за вашу помощь
Обновление 1
Я создаю определенную версию своего приложения без Bluetooth, просто модуль slide to unlock и наблюдатель с setInterval, и при отправке состояния у меня все еще запаздывает поведение. Я проводил тесты только с помощью кнопки, когда я нажимаю, а затем показываю значение через отправку, это все та же проблема.
это мой тестовый код, index.js (файл действия redux)
export const readTemp = () => {
return (dispatch, getState, DeviceManager) => {
const state = getState();
console.log("READ TEMP");
dispatch(temperatureSensor( Math.random(0,9) ))
}
}
function BLEservices(BLEServices) {
setInterval(() => {
BLEServices.readTemp();
}, 2500);
return (
<SafeAreaView style={styles.container}>
<Slider
childrenContainer={{ }}
onEndReached={() => {
console.log('REACHED')
}}
containerStyle={{
height:40,
margin: 8,
backgroundColor: "#EEEEEE",
overflow: 'hidden',
alignItems: 'center',
justifyContent: 'center',
width: '50%',
}}
sliderElement={
<Text style={{color:"#FFF"}}>TEST</Text>
}
>
<Text style={{color: "#D5BD9E"}}>unlock</Text>
</Slider>
<Text>Temperature: {BLEServices.temperatureSensor}</Text>
</SafeAreaView>
);
}
спасибо за ваш совет и вашу помощь
Обновление 2
Решение найдено, см. Мой ответ ниже. Проблема заключалась в типе пользователя var в отправке и некотором побочном эффекте из-за предыдущего теста, который я провел в приложении, а не очистил их.
Комментарии:
1. Когда вы отправляете readTemp, он вызывает что-то с устройства? Если вы закомментируете функцию устройства, оно все еще отстает? Из-за моих лет работы с react-native и redux я не думаю, что это причина поведения, с которым вы сталкиваетесь.
2. Я не вижу, где вы очищаете свой интервал, я не думаю, что проблема в redux, я считаю, что это ваш интервал, должно быть много интервалов, создаваемых при каждом рендеринге и насыщающих поток js.
3. спасибо за ваш совет. Я провел несколько тестов,
dispatch(formatTemperature(characteristic.value));заменив их простым console.log, я правильно получаю значение в своей консоли, и поведение с задержкой исчезло, но я должен использоватьdispatch()function для получения значения в моем интерфейсе. Если у вас есть другая идея, чтобы избежать ее использования и повторного рендеринга, я открыт для предложений. У меня есть четкий интервал, когда я покидаю текущую страницу, но мне нужно иметь температуру в режиме реального времени4. Является ли изменение состояния в вашем редукторе неизменным? Иногда, если у вас этого нет, это также замедляет работу.
5. извините, я новичок в redux, что вы конкретно имели в виду под неизменяемым редуктором? У меня есть этот код в моем редукторе:
react case 'TEMPERATURE_SENSOR': return update(state,{temperatureSensor: {$set: action.temperatureSensor} });это то, что вы имеете в виду?
Ответ №1:
Я решил свою проблему, найдя несколько переменных, которые содержат объекты. У меня есть переменная, которая содержит четыре атрибута, я обновляю и использую один из них. И этот объект был обновлен моим наблюдателем. Когда я отправляю объект, чтобы получить часть этого объекта, я должен прочитать весь объект, и он полностью обновляется моим наблюдателем, что приводит к задержке рендеринга. Поэтому я разделил это, чтобы обновлять только для каждого параметра. Еще одна вещь, которую я сделал, я разделил свои элементы интерфейса на многокомпонентные, раньше у меня было много кода на одном экране, потому что мне не нужно было повторно использовать их в другом месте.