How to Update the state in react redux-saga

Question

I am newbie to react, redux-saga, I have a dropdown in page Display, when I select it move to respective component (eg. policy, score), In Component Pages, I have a button Add New, on clicking it will navigate to a page as mentioned in link url , which is a page having cancel button, on cancelling it returns to the Display.js but no dropdown selected, I would like to keep the state articleMode, when navigating to a page and returning back to same page, articleMode returns to state -1 instead of selected component Policy or Score

actions.js
export const updateArticleMode = data => {
  console.log(data.body);
  return {
    type: CONSTANTS.UPDATE_ARTICLE_MODE,
    data: data.body
  };
};

queryReducer.js
import * as CONSTANTS from "../constants/constants";
const initialState = {
  articleMode: ""
}
case CONSTANTS.UPDATE_ARTICLE_MODE: {
 return {
   ...state,
   articleMode: data.mode
    };
 }
export default queryReducer;
constants.js
export const UPDATE_ARTICLE_MODE = "UPDATE_ARTICLE_MODE";



Display.js

import React from "react";
import { connect } from "react-redux";
import Policy from "../policy";
import Score from "./../score";
import { updateArticleMode } from "../../../../actions/actions";

const articleMode = [
  { name: "Select", id: "-1" },
  { name: "Score", id: "Score" },
  { name: "Policy", id: "Policy" }
]
class Display extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      articleMode: "-1"
    };
  }
  componentWillMount = () => {
    this.setState({ articleMode: this.props.queryData.articleMode || "-1" });
  };
 _getComponent = () => {
    const { articleMode } = this.state;
    if (articleMode === "Policy") {
      return <DisplayPolicy></DisplayPolicy>;
    }
    if (articleMode === "Score") {
      return <DisplayScore></DisplayScore>;
    }
  }

  render() {
    return (
      <React.Fragment>
 <select name="example"
                className="simpleSearchSelect1"
                value={this.state.articleMode}
                onChange={event => {
                  this.setState({ articleMode: event.target.value });
                  this.props.dispatch(
                    updateArticleMode({ body: { mode: event.target.value } })
                  );
                }}
                style={{ marginLeft: "2px" }}
              >
                {articleMode.length != 0 &&
                  articleMode.map((option, index) => {
                    const { name, id } = option;
                    return (
                      <option key={index} value={id}>
                        {name}
                      </option>
                    );
                  })}
              </select>
    {this.state.articleMode === "-1"
          ? this._renderNoData()
          : this._getComponent()}

     </React.Fragment>
   )}

const mapStateToProps = state => {
  return {
    queryData: state.queryData
  };
};

export default connect(mapStateToProps)(Display);
}

DisplayPolicy.js
import React from "react";

class DisplayPrivacyPolicy extends React.Component {
  constructor(props) {
    super(props);


}<Link
          to={{
            pathname: "/ui/privacy-policy/addNew",
            state: {
              language: "en"
            }
          }}
        >
          <button className="page-header-btn icon_btn display-inline">
            <img
              title="edit"
              className="tableImage"
              src={`${process.env.PUBLIC_URL}/assets/icons/ic_addstore.svg`}
            />
            {`Add New`}
          </button>
        </Link>

AddNew.js

<Link
          to =pathname: "/ui/display",
          className="btn btn-themes btn-rounded btn-sec link-sec-btn"
        >
          Cancel
        </Link>