javascript - 类属性更改时 Redux 重新加载状态

Question

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

类(class):

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

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

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

这是 reducer :

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 。你的 reducer 不纯。您可以使用方法来存储对象。此外，您可以调用这些方法，并且 redux 不会知道某些内容发生了更改。

如果您想使用 redux，则不必在 reducer 中存储 BluetoothService 。只需存储属性 isConnected 和 deviceID 并执行操作 connect 和 write 即可更改它们。