2016-12-07 3 views
0

Эй, ребята, у меня проблема с реакцией-редукцией. У меня есть страница Login.js. Когда я нажимаю кнопку, вызывается функция changeSite, из которой я пытаюсь отправить. Я попробовал взглянуть, но ничего не получилось. Было бы здорово, если бы кто-нибудь мог мне помочь.this.props.dispatch не вызывает редуктор

Login.js:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Link } from 'react-router'; 
import { connect } from 'react-redux'; 

@connect((store) => { 
    return { 
    user: store.user.state.user, 
    registered: store.user.state.registered, 
    } 
}) 
export default class Login extends React.Component{ 

    handlePassword(e){ 

    } 

    handleUsername(e){ 

    } 

    changeSite(){ 
    this.props.dispatch({type: "CHANGE_REG", payload: !this.props.registered}); 
    console.log(this.props.registered); 
    } 

    login(){ 

    } 

    render(){ 
    console.log(this.props.registered); 
    if(this.props.registered === true){ 
     var loginPage = (
     <div> 
      <h2>Login</h2> 
      <p>Please login with your credentials</p> 
      <form> 
      <input placeholder="Username" type="text"/><br/> 
      <input placeholder="Password" type="password"/> 
      <p>You do not have an account yet?</p> 
      <input type="submit" value="register" onClick={this.changeSite.bind(this)}/> 
      </form> 

     </div> 
    ); 
    }else{ 
     var loginPage = (
     <div> 
      <h2>Register</h2> 
      <p>Please register with your credentials</p> 
      <form> 
      <input placeholder="Username" type="text"/><br/> 
      <input placeholder="Password" type="password"/><br/> 
      <input placeholder="repeat Password" type="password"/> 
      <p>You already have an account?</p> 
      <input type="submit" value="login"/> 
      </form> 

     </div> 
    ); 
    } 

    return(
     <div> 
     {loginPage} 
     </div> 
    ); 
    } 


} 

Разбавление:

export default function reducer(state={ 
    user:{ 
    id: null, 
    name: null, 
    password: null, 
    }, 
    registered: true, 
}, action){ 
    switch(action.type) { 
    case 'USER_LOGIN':{ 
     return { ...state, user: action.payload} 
    } 
    case 'CHANGE_REG':{ 
     return { ...state, registered: action.payload} 
    } 
    } 

    return {state} 
} 
+0

Вы обернули свой компонент входа в компонент «Поставщик», чтобы открыть хранилище? – hunterc

+0

Да, я действительно ... – ITzBrotasco

+0

'console.log (this.props.registered)' возвращает какое-то значение? – bntzio

ответ

0

На самом деле это было очень похожее решение: Я получил свое состояние как объект, а не как само государство. Я изменил это:

. . return {state}; . .

с этим:

. . Состояние возврата; . .

Благодарим за поддержку