在离开页面后重置我的应用程序的redux状态

Reseting the redux state of my app after leaving page

本文关键字:应用程序 我的 redux 状态 离开      更新时间:2023-09-26

我见过类似的问题,但没有一个真正适用。

我的应用程序所做的一切,当用户点击其中一个按钮时,该动作发出get请求并在屏幕上显示来自该请求的数据。问题是,在我离开页面后,显示的数据保留了下来。我希望每次用户离开页面时,数据都消失(因此只显示默认消息)

下面是我的相关代码:

// the actions.js:
export function fetchLogs(logsUrl){
    const request = axios.get(logsUrl);
    return (dispatch)=>{
        request.then(({data}) => {
            dispatch({type: 'FETCH_LOGS',
                      payload: data,
                      url: logsUrl});
        });
    }
}
//reducer-logs.js
export default function (state=null, action){
    switch(action.type){
        case 'FETCH_LOGS':
            return {data: action.payload,
                    url: action.url};
        break;
    }
    return state;
}
//reducer's index.js
const allReducers = combineReducers({
    logs:Logs,
});
//log-directories.js (where the menu is with the possible options)
class LogList extends Component{
    render(){
        var me = this;
        return (
            <ListGroup>
                <ListGroupItem
                    bsStyle="success">{this.props.directory}</ListGroupItem>
                 {logList.map(function (log, key) {
                        return (<ListGroupItem
                            onClick={()=>me.props.fetchLogs(me.state.url+"/"+log)}>
                                {log}
                            </ListGroupItem>);
                    })}
            </ListGroup>
        );
    }
}
function mapStateToProps(state){
    return {
        logs: state.logs
    }
}
function matchDispatchToProps(dispatch){
    return bindActionCreators({fetchLogs: fetchLogs}, dispatch);
}
export default connect (mapStateToProps, matchDispatchToProps)(LogList);
//where the data from fetchLogs action is displayed: log-display-panel.js
class LogPanel extends Component{
    render(){
        if(!this.props.logs){
            return (<ListGroupItem bsStyle="warning">
                Please select a log from the list to view its content.
            </ListGroupItem>);
        }
        else{
            return (
          <Panel>{this.props.logs.data}</Panel>
            );
        }
    }
}
function mapStateToProps(state){
    return{
        logs: state.logs
    };
}
export default connect(mapStateToProps)(LogPanel);

你可以:

  • 在该组件中,使用React的componentWillUnmount()生命周期方法来调度一个触发Redux状态重置的动作。