Question

我在Redux存储中存储了一个蓝牙类，希望在修改类的属性时更新状态。

课程：

export default class BluetoothService {
    constructor() {
        this.isConnected = false
        this.deviceID = ""
    }

    connect() {
        this.deviceID = "something"
        this.isConnected = true
    }

    write() {
      someLibrary.write(this.deviceID)
    }
}

这是减速器：

export default function blueoothReducer(state = null, action) {
    switch (action.type) {
        case LOAD_BLUETOOH:
            return new BluetoothService()
        default:
            return state
    }
}

我将其传递给组件，如下所示：

const mapStateToProps = state => {
    return {
        bluetoothService: state.bluetoothService
    }
}

export default connect(mapStateToProps)(Profile)

我的应用加载后，我一次调度了LOAD_BLUETOOTH。

实际问题

在我的组件中，我调用this.props.bluetoothService.connect()，期望组件更新并重新渲染，因为isConnected属性已更改-但组件未更新。

当我更改蓝牙类的属性时，有什么创造性的方法可以使组件重新呈现？

Answer 1

Reducer is a pure function。您的减速器不纯。您将对象与方法一起存储。此外，您可以调用这些方法，而redux不会知道某些更改。

如果要使用redux，则不必将BluetoothService存储在reducer中。只需存储属性isConnected和deviceID并进行操作connect和write即可对其进行更改。

Answer 2

由于redux的想法是要拥有一个永远不会从外部变异的状态，而只能被化简器覆盖，所以我实际上会考虑使用isConnected = true方法设置connect()作为反模式。由于您的BluetoothService实例实际上是您的redux状态，因此您可以轻松地创建一个设置isConnected的化简器：

case(CONNECT):
    return {...state, isConnected: true}

但是，不建议在状态下存储函数/方法，因为它应该始终是可序列化的（而函数不是），如this post中所述。

类属性更改时Redux重载状态

实际问题

2 个答案: