Reactjs React Redux：如何在页面导航之间重置标志？

我想在React Redux组件中单击按钮时显示“成功消息”

我在reducer中设置了该值，消息按预期显示。问题是，如果我转到另一个页面（例如主页）并返回到/关于该页面，它仍然显示成功消息，并且没有消失

如果我转到/List页面，该状态已清除，因为我的reducer正在重置

resetTodoSuccess

值。然而，对我来说，为我网站中的每一条路线重置该值是没有意义的，我认为这不是正确的方法

您能告诉我将标志

resetTodoSuccess

设置为false的最佳方法吗

AboutPage.js 当

resetTodoSuccess

为true时，我显示一条消息

export class AboutPage extends Component {
static propTypes = {
    resetTodoSuccess: PropTypes.bool.isRequired,
    resetTodoItem: PropTypes.func.isRequired
}

onReset = () => this.props.resetTodoItem();

render() {

    const { resetTodoSuccess } = this.props;

    return (
        <Container>
            {
                resetTodoSuccess &&
                <Message message="The items are reset successfully." messageType={MessageType.Success} />
            }
            <Button color="success" onClick={this.onReset}>Reset Todo Items</Button>
            <p className="text-danger">Click here to reset the items of todo.  Please becareful that you will lose any added items.</p>                
        </Container>
    )
}
}
const mapStateToProps = (state) => (
    {   
        resetTodoSuccess: state.todo.resetTodoSuccess
    }
)

const mapDispatchToProps = dispatch => {
    return {
        resetTodoItem: () => dispatch(resetTodoItem())
    };
};


export default connect(mapStateToProps, mapDispatchToProps)(AboutPage)

另外，我想知道对于这种功能使用React-Redux流是否真的正确。因为此状态对于其他组件不再有用

---

换句话说，是否允许在不同组件中混合React和React Redux模式来调用异步服务？

首先，您需要一个具有适当类型的操作。然后需要一个reducer，将redux状态下的

resetTodoSuccess

设置为false。接下来，将回调添加到

mapDispatchToProps（）

，该回调将调度新操作。最后，实现调用回调

另外，我想知道使用React Redux是否真的正确 这类功能的流程。因为这会重置为不成功 状态对于其他组件不再有用

我并不认为仅仅为了显示警报就需要使用redux。在我看来，从用户体验的角度来看，最好有超时/淡出的警报。警报容器应始终放置在同一位置，以免混淆用户

看一看，或者如果你有顶部导航栏，你可以在下面添加警报（带有粘性位置）

我不会使用redux，而是使用lib

创建pubsub实例

订阅您的活动，例如警报、模态

将pubsub实例传递到全局上下文

从上下文中使用pubsub，并在需要时随时发布

您甚至可以在redux操作中使用pubsub

为什么我不使用redux来显示警报？要编写的代码越多，维护的时间越长，越容易出错（例如，您忘记发送某些东西）

下面是pubsub实现的简单示例：

// Shared events
const ALERT = 'alert';

// Bootstrap app
PubSub.subscribe(ALERT, function(message, alertType) { 
  // invoke alert
  // message text, type of alert, display time in ms
  myFancyAlert(message, alertType, 1000)
});

// publish in any other sub route 
PubSub.publish(ALERT, 'hello world!');

---

我正在学习React-Redux，所有教程都在使用Redux进行页面上的每一次单击。所以，我对设计决策感到困惑。在以后的学习过程中，我一定会研究材料ui。

// Shared events
const ALERT = 'alert';

// Bootstrap app
PubSub.subscribe(ALERT, function(message, alertType) { 
  // invoke alert
  // message text, type of alert, display time in ms
  myFancyAlert(message, alertType, 1000)
});

// publish in any other sub route 
PubSub.publish(ALERT, 'hello world!');