类属性更改时 Redux 重新加载状态答案

【问题标题】：Redux reload state when class attribute changes类属性更改时 Redux 重新加载状态
【发布时间】：2019-09-24 05:22:21
【问题描述】：

我在我的 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 属性已更改 - 但组件没有更新。

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

【问题讨论】：

我猜你的 state 对象没有在你的 reducer 中更新，因此为什么 mapStateToProps 没有注意到这个动作
@messerbill 你能想出任何拥有有状态的 redux 属性的方法吗？
恕我直言，在您的 redux 状态下设置“蓝牙连接”值并通过触发 redux 操作来启用/禁用它会是一种更好的方法。也许你以前一直在开发 Angular？许多 Angular 开发人员希望在使用 React 时在 Angular 中使用该服务机制。但这是反应中的错误思维方式......只需使用redux，如果需要异步操作sagas。根本不需要定义任何其他“服务”
该服务包含有用的方法，可以在应用程序范围内工作而无需提供任何额外的参数，因为所有信息都存储在服务类中。我在想也许我应该调度一个动作来更新商店，然后组件将重新渲染。有点骇人听闻。
我认为问题出在减速器上。当调用 LOAD_BLUTOOH 操作时，您不会返回一个对象，而是返回一个蓝牙服务的新实例，它是一个 javascript 类。这是非常不寻常的，因为在 redux 中，状态应该是一个普通的对象。正常的做法是在你的 reducer 中保持 isConnected 状态，并让一个动作改变它的状态。然后你可以连接你的组件来读取这个值。

标签： javascript react-native redux

【解决方案1】：

由于 redux 的想法是拥有一个永远不会从外部改变的状态，而只会被 reducer 覆盖，我实际上会考虑将 isConnected = true 与 connect() 方法设置为反模式。由于您的 BluetoothService 实例实际上是您的 redux 状态，因此您可以轻松创建一个设置 isConnected 的 reducer：

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

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

【讨论】：

【解决方案2】：

Reducer is a pure function。你的减速机不纯。你用方法存储一个对象。而且，你可以调用这些方法，redux 不会知道发生了什么变化。

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

【讨论】：