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

Question

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

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

如果我转到 /List 页面，则该状态已明确，因为我的减速器正在重置 resetTodoSuccess 值。但是，对我网站中的每条路线都重新设置该值没有意义，而且我认为这不是正确的做法。

您能否建议我将标志 resetTodoSuccess 设置为 false 的最佳方法是什么？

关于Page.js 当resetTodoSuccess 为真时，我会显示一条消息。

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)

TodoReducer.js

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.ADD_TODO_ITEM_SUCCESS: {
            return { ...state, addTodoSuccess: true };
        }
        case actionTypes.LOAD_TODO_SUCCESS:
            return { ...state, tasks: action.payload, addTodoSuccess: false, removeTodoSuccess: false, resetTodoSuccess: false };
        case actionTypes.REMOVE_TODO_SUCCESS: {            
            return { ...state, tasks: action.payload, removeTodoSuccess: true };            
        }        
        case actionTypes.RESET_TODO_SUCCESS: {            
            return { ...state, resetTodoSuccess: true };
        } 
        default:
            return state;
    }
}

PS。我想知道将 React-Redux 流程用于这种功能是否真的正确。因为这个resetTodoSuccess 状态不再对其他组件有用。

也就是说，是否允许在不同的组件中混合使用 React 和 React-Redux 模式来调用异步服务？

Answer 1

首先，您需要一个具有适当类型的操作。然后你需要一个减速器，将 redux 状态下的 resetTodoSuccess 设置为 false。接下来，向mapDispatchToProps() 添加一个回调，以调度新操作。最后实现componentWillUnmount()调用回调。

Answer 2

附言。我想知道使用 React-Redux 是否真的正确 流这种功能。因为这个 resetTodoSuccess state 不再对其他组件有用。

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

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

我会使用 pubsub lib 而不是使用 redux。

1. 创建发布订阅实例
2. 订阅您的活动，例如。警报、模式
3. 将 pubsub 实例传递给全局上下文
4. 根据上下文使用 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!');