reactjs - Redux - 未显式调用时调度操作

Question

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

1. 我有另一个函数 nextFiveDays ，它调用完全相同的操作，但通过单击按钮来触发。单击按钮时，我确实看到 action.type 已分派(dispatch) UPDATE_DATE 并且商店已更新。

2. 在函数 nextFiveDays 中，即使 updateDate 函数被注释掉，也会调度该操作。看起来 setState 仍然会触发要分派(dispatch)的操作。这是为什么？

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状态并重新渲染组件。

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

您在 onChange 事件处理程序中分派(dispatch)操作。

这就是调度该操作的原因。

注意:

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

解决方案:

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

您可以删除date状态值并将属性从您的商店映射到组件 Prop 。 (使用mapStateToProps)

因此，只需分派(dispatch)该操作即可将您的日期值从存储区持久保存到组件中。