将数据从操作传递到reducer失败的react - redux

时间:2017-06-12 12:54:19

标签: reactjs redux react-redux

我是React的新手。当我阅读许多文档时,我意识到应用程序的状态应该在每个组件之外进行管理。我选择Redux作为我的项目。我尝试从username组件中传递passwordSigIn。但是当我点击login按钮时,开关内的默认语句总是被执行。代码如下。   SignIn.js如下所示

   import React from 'react';
   import Header from './Head.js';
   import { logIn } from '../actions/index.js';
   import { connect } from 'react-redux';
   import {bindActionCreators} from 'redux';
   class SignIn extends React.Component{
     constructor(){
       super();
       this.logInClick      =   this.logInClick.bind(this);
    }

   logInClick() {
      let { dispatch } = this.props;
      const data    = {username:'sojimon@gmail.com', password:'12345'}
       // this.props.logIn(data);
      this.props.dispatch(logIn(data));
   }
    render(){
    return(
            <div>
                <Header/>
                <br/>
                <div  className="col-md-4 col-md-offset-4">
                    <div className="well">
                        <h4 className="signin_header">Sign In</h4>
                        <div>
                            <div>
                                <label>Email:</label>
                                <input type="text" className="form-control" />
                            </div>
                            <div>
                                <label>Password:</label>
                                <input type="text" className="form-control"/>
                            </div>
                            <br/>
                            <button className="btn btn-primary"  onClick={  this.logInClick }>Login</button>
                        </div>
                    </div>
                </div>
            </div>
    )
}
}

 const matchDispatchToProps = (dispatch) => ({
 // logIn: (data) => dispatch(logIn(data)),
 })

 SignIn.propTypes = {
   logIn: React.PropTypes.func
 }

 export default connect (matchDispatchToProps)(SignIn);

我的动作/ index.js如下,

 import * as types  from './types.js';

 export const logIn = (state, data) => {
    return {
       type: types.LOG_IN,
       state
    }

 }

还是reducers / logIn.js,

 import React from 'react';
 import { LOG_IN } from '../actions/types.js' 
 const logIn = (state = [], action) => {
  switch (action.type) {
  case 'LOG_IN':
      console.log('switch Case ==> LOG_IN');
      return [
          ...state,
          {
            username:       'asdf',
            password:       '123',
          }
      ] 
   // return action.logIn
 default:
 console.log('switch Case ==> Default');
  return state
 }
}

export default logIn

并在index.js文件中创建了商店,

import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './app/App';
   import './app/index.css';
   import Routes from './app/route';

  import { createStore } from 'redux' // import store
  import { Provider } from 'react-redux' // import provider
  import  myApp  from './app/reducers/index.js' 
  let store = createStore(myApp);     
  ReactDOM.render(
   <Provider store={store}>
     <Routes />
   </Provider>,
 document.getElementById('root')
 );
 export default store;

0 个答案:

没有答案