Question

我正在开发一个项目，我使用Django作为后端，使用React作为前端，使用Redux作为状态管理器。我想将函数从我的登录和注册组件传递到Header组件，而我的header组件不是根组件，因此我无法将params直接传递给其他组件。我知道redux可以解决此问题，但我不知道怎么办？我的标头组件（登录，注册）中有两个单独的链接，我的意思是，当我单击登录名时，它应该从我的登录组件中调用openLoginModal()，并为注册组件调用相同的过程

我的标题组件

import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";

export class Header extends Component {
  render() {
    return (
      <Fragment>
        <nav className="navbar navbar-expand-sm ">
          <div className="container">
            <button
              className="navbar-toggler"
              type="button"
              data-toggle="collapse"
              data-target="#navbarTogglerDemo01"
              aria-controls="navbarTogglerDemo01"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarTogglerDemo01">
              <a className="navbar-brand" href="/">
                Todos
              </a>
              <ul className="navbar-nav ml-auto mt-2 mt-lg-0">
                <Link to="/register">
                  <button className="btn btn-outline-primary btn-sm mx-2">
                    Register
                  </button>
                </Link>
                <Link to="/login">
                  <button className="btn btn-outline-primary btn-sm">
                    Login
                  </button>
                </Link>
              </ul>
            </div>
          </div>
        </nav>
      </Fragment>
    );
  }
}

export default Header;

我还使用react-awesome-modal创建登录和注册模式，这是我的登录组件

import React, { Component, Fragment } from "react";

export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      username: "",
      password: "",
    };
  }

  openLoginModal() {
    this.setState({
      visible: true,
    });
  }

  closeLoginModal() {
    this.setState({
      visible: false,
    });
  }

  render() {
    const { username, password } = this.state;
    return (
      <Fragment>
        <section>
          <Modal
            visible={this.state.visible}
            width="400"
            height="300"
            effect="fadeInUp"
            onClickAway={() => this.closeLoginModal()}
          >
            <div>
              <form>
                <div className="form-group">
                  <label>Username</label>
                  <input
                    type="text"
                    className="form-control"
                    name="username"
                    value={username}
                  />
                </div>
                <div className="form-group">
                  <label>Password</label>
                  <input
                    type="password"
                    className="form-control"
                    name="password"
                    value={password}
                  />
                </div>
                <div className="form-group">
                  <button className="btn btn-primary btn-sm my-2">Login</button>
                </div>
              </form>
            </div>
          </Modal>
        </section>
      </Fragment>
    );
  }
}

export default Login;

Answer 1

只需将变量isOpenModal存储到redux状态并添加2个动作创建者

openModal() { 
    return { type: 'OPEN_MODAL' } 
}
closeModal { 
    return { type: 'CLOSE_MODAL' 
}

通过减速器（文件减速器）更改状态

// another code
switch(action.type) {
    case 'OPEN_MODAL':
        state.isOpenModal = true;
        break;
    case 'CLOSE_MODAL':
        state.isOpenModal = false;
        break;
    // another code 
}

在文件标题中，使用mapDispatchToProps来调用2个动作创建者openModal和closeModal，如上创建。

在文件Login中，使用mapStateToProps在redux状态下使用isOpenModal状态。

如何使用Redux管理状态

1 个答案: