Question

嘿伙计们我对react-redux有疑问。我有一个页面Login.js。当我点击一个按钮时，会调用changeSite函数，我试图调度该函数。我尝试了一种观察方式但没有任何效果。如果有人能帮助我会很棒。

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}
}

Answer 1

在您定义store的地方，您必须将减速器传递给createStore方法。

在ReduxJS文档中，您可以使用combineReducers方法找到an example with a single store和with multiple stores。

Answer 2

实际上这是一个非常相似的解决方案：我把我的状态作为一个对象而不是状态本身返回。我改变了这个：

。。 return {state}; 。

用这个：

。。返回状态; 。

感谢您的支持

this.props.dispatch没有调用reducer

2 个答案: