Question

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

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

如果我转到/ List页面，该状态已清除，因为我的reducer正在重置resetTodoSuccess值。但是，对我来说，为我网站中的每条路线重置该值是没有意义的，我认为这不是正确的方法。

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

AboutPage.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

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

Answer 2

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

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

看一下snackbars，或者如果你有顶部导航条，你可以添加警告（仅有粘性位置）。

我没有使用redux，而是使用pubsub 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：如何在页面导航之间重置标志？

2 个答案: