带有 redux 的 React Native 在调度时滞后

Question

在我的应用程序中，我有一个函数，它每 2 秒调用一个蓝牙命令来询问具有 setInterval 函数的设备的当前温度。

蓝牙响应由监控函数给出。为此，我使用了 React native-ble-plx 库。我对这个过程没问题。

温度通过属性返回，该属性通过动作文件中的 redux 调度。但是当我将函数“调度”（通过 redux）到我的屏幕时，我有一个短暂的中断导致 laggy/jerky 行为。在我的例子中，我有一个滑动解锁按钮，当调用调度时，在我的设备上，触摸操作被中断，变得不直观和烦人。很难解释这个问题，但我的问题很简单，我必须如何设置 react-redux 不延迟，或者不中断当前用户在 redux dispatch 上的交互？

我的应用程序基于此项目结构（用于使用 Ble 的 react-redux）：https://github.com/momolarson/BLEServiceDiscovery

环境：本机反应：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 && characteristic.value != null) {
            dispatch(formatTemperature(characteristic.value));
        }
    },
);

感谢您的帮助

更新 1

我制作了我的应用程序的特定版本，没有蓝牙，只有滑动解锁模块和带有 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 用户类型和一些副作用，这是由于我之前在应用程序上进行的测试但没有清理它们。

Answer 1

我通过找到多个包含对象的变量解决了我的问题。我有一个包含四个属性的 var，我更新并使用其中一个。这个对象是由我的观察者更新的。当我分派对象以获取该对象的一部分时，我必须读取整个对象，而这个对象由我的 watchern 完全更新，这会导致渲染延迟。所以我把它分开了，只更新每个变量。我做过的另一件事是，我将界面元素拆分为多个组件，以前，我在一个屏幕上有很多代码，因为我不需要在其他地方重用它们。

带有 redux 的 React Native 在调度时滞后

React native with redux is laggy on dispatch

user-experience

react-native

react-redux

react-native-ble-plx