mapStateToProps 不会改变状态答案

【问题标题】：mapStateToProps doesn't change statemapStateToProps 不会改变状态
【发布时间】：2019-11-15 21:21:28
【问题描述】：

我是redux的新手，想学习它，我想在成功登录后重定向到仪表板内容，这是我的代码：

class Dashboard extends Component {
  state = {
    logged: false
  };
render() {
    const { classes } = this.props;
    console.log(this.state.logged)

    return (
<div>
{this.state.logged ?
<div>
<p>Hello</p>
</div>
: Login()
</div>
)}
}

const mapStateToProps = (state, props) => {
  return {
      logged: state.logged
  }
}

export default connect(mapStateToProps)(Dashboard)

减速器：

const initialState = {
    login: [],
    logged: false
}

function rootReducer(state = initialState, action) {
    switch(action.type) {
        case VALIDATE_LOGIN:
            return  {
                    // logged: action.text.name == "a" && action.text.password == "b" ? true : false,
                    ...state,
                    logged: true
                }
        default:
            return state
    }

}

export default rootReducer

为什么它不想改变仪表板的状态并呈现正确的内容？谢谢

在这里编辑，我在调度我的减速器的地方添加代码：登录：

class Login extends Component {
  state = {
    name: "",
    password: ""
  };


  handleLogin = () => {
    this.props.LogIn(this.state)
  }

  render() {
    return (
      <div>
        <Typography variant="h3">
          Login Form
        </Typography>
        <form>
          <TextField label="name" onChange={el => this.setState({name: el.target.value})} />
          <TextField label="password" type="password" onChange={el => this.setState({password: el.target.value})} />
          <Button onClick={this.handleLogin}>Login</Button>
        </form>
      </div>
    );
  }
}

const dispatchToProps = dispatch => {
  return {
    LogIn: login => dispatch(LogIn(login))
  }
}

export default connect(null, dispatchToProps)(Login);

当我尝试在 mapStateToProps 中登录控制台日志时，我可以看到日志已更改为 true，但不幸的是，仪表板上没有明显的效果。我的想法是，也许它在改变状态后不会重新渲染，但我不知道......

【问题讨论】：

欢迎杰基！只是为了确保（因为它没有显示在您的代码中），VALIDATE_LOGIN 操作是否在某个时候调度？
你如何调用登录操作/reducer

标签： reactjs redux

【解决方案1】：

改变

{this.state.logged ?
<div>
<p>Hello</p>
</div>
: Login()
</div>
)}

与

{this.props.logged ?
<div>
<p>Hello</p>
</div>
: Login()
</div>
)}

【讨论】：

据说如果我没有声誉我不能，但我会在2分钟内将其设置为正确答案

【解决方案2】：

mapStateToProps 将“状态”（redux 状态）映射到“道具”（组件道具）。不是“状态”到“状态”

class Dashboard extends Component {
  render() {
    const { classes, logged } = this.props

    return (
      <div>
        {logged ? (
          <div>
            <p>Hello</p>
          </div>
        ) : (
          Login()
        )}
      </div>
    )
  }
}

如果您实际上不使用它，也不要在mapStateToProps 中指定第二个参数。这会阻止react-redux 进行的优化。

const mapStateToProps = (state) => {
  return {
      logged: state.logged
  }
}

【讨论】：