mapStateToProps не меняет состояние - PullRequest
1 голос
/ 05 июля 2019

Я новичок в редуксе и хочу изучить его, я хочу сделать редирект на контент панели мониторинга после успешного входа в систему, вот мой код:

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, нок сожалению, нет никакого видимого эффекта на приборной панели.Моя идея заключается в том, что, возможно, он не рендерится после изменения состояния, но я не знаю ...

Ответы [ 2 ]

2 голосов
/ 05 июля 2019

mapStateToProps отображает «состояние» (состояние приставки) в «реквизит» (компонентный реквизит). Не "состояние" для "состояние"

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
  }
}
0 голосов
/ 05 июля 2019

Изменение

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

с

{this.props.logged ?
<div>
<p>Hello</p>
</div>
: Login()
</div>
)}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...