Redux-未明确调用时调度操作

debugcn 发表于 Dev

王

我对Redux相当陌生，并且遇到了一些我不太了解的行为。

我有另一个函数nextFiveDays调用完全相同的操作，但是单击按钮会触发该操作。单击该按钮后，我确实看到UPDATE_DATE分派了action.type并更新了商店。
在函数中nextFiveDays，即使updateDate函数已被注释掉，也将分派动作。似乎setState仍触发要分派的动作。这是为什么？

class SomeComponent {
    state = { date: new Date() }

    nextFiveDays = () => {
        let date = new Date(this.state.date);
        date.setDate(date.getDate() + 5);
        //updateDate(date); // Redux store action dispatch
        this.setState({ date });
    };

    prevFiveDays = () => {
        let date = new Date(this.state.date);
        date.setDate(date.getDate() - 5);
        //updateDate(date); // Redux store action dispatch
        this.setState({ date });
    };

    render() {
        const { date } = this.state

        return <SemanticDatepicker
                        value={new Date(date)}
                        date={new Date(date)}
                        onChange={(_, data: any) => {
                            this.setState({ date: data.value });
                            updateDate(data.value);
                        }}
                    />
                       <Button
                            onClick={this.prevFiveDays}
                        />
                        <Button
                            onClick={this.nextFiveDays}
                        />
    }

ash

调用该nextFiveDays函数时，它将更新date状态并重新渲染组件。

您可以SemanticDatePicker使用此date状态值设置的值，以触发onChange事件。

您在onChange事件处理程序中调度操作。

这就是为什么要分派行动的原因。

注意：

可以将Redux Actionprops与组件绑定在一起，但与组件状态无关。

解：

当前，您正在使用相同的值更新组件的状态和redux存储。

您可以删除date状态值，并将属性从商店映射到组件prop。（使用mapStateToProps）

因此，仅通过分派操作即可将您的date价值从商店中持久保存到组件中。

本文收集自互联网，转载请注明来源。