Question

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

我还有另一个函数nextFiveDays，该函数调用完全相同的操作，但是单击按钮会触发该操作。单击该按钮后，我确实看到该action.type已派发UPDATE_DATE并更新了商店。
在功能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}
                        />
    }

Answer 1

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

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

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

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

注意：

Redux Action可以绑定到组件的props，但与组件的状态无关。

解决方案：

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

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

因此，只需调度操作，您的date值将从商店中持久存储到组件中。

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

1 个答案: