javascript - 如何在反应 redux-saga 中更新状态

Question

我是新手，redux-saga，我在 page 中有一个下拉菜单Display，当我选择它时，它会移动到相应的组件（例如策略，分数），在组件页面中，我有一个按钮Add New，点击它会导航到一个页面如链接 url 中所述，这是一个具有取消按钮的页面，在取消它时会返回Display.js但未选择下拉菜单，我想保持状态articleMode，当导航到页面并返回到同一页面时，articleMode 返回状态 - 1 而不是选定的组件Policy或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>

标签： javascriptreactjsreact-reduxredux-sagareact-state-management