Состояние перезагрузки Redux при изменении атрибута класса

Question

Я храню класс Bluetooth в своем магазине 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 изменилось, но компонент не обновляется.

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

Answer 1

Редуктор - это чистая функция .Ваш редуктор нечистый.Вы храните объект с методами.Более того, вы можете вызывать эти методы, и приставка не будет знать, что что-то было изменено.

Если вы хотите использовать избыточность, вам не нужно хранить BluetoothService в редукторе.Просто сохраните свойства isConnected и deviceID и выполните действия connect и write для их изменения.

Answer 2

Поскольку идея избыточности заключается в том, чтобы иметь состояние, которое никогда не мутирует извне, а только перезаписывается редукторами, я бы на самом деле рассмотрел установку isConnected = true с помощью метода connect() в качестве анти-паттерна. Поскольку ваш экземпляр BluetoothService на самом деле является вашим состоянием редукции, вы можете легко создать редуктор, который устанавливает isConnected:

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

Однако не рекомендуется хранить функции / методы в состоянии, так как они всегда должны быть сериализуемыми (а не функцией), как упоминалось в этом посте .