Reactjs 在react-redux中将数据从操作传递到减速器失败

我是新来的。当我阅读许多文档时，我意识到应用程序的状态应该在每个组件之外进行管理。我为我的项目选择了Redux。我试图从我的

SigIn

组件传递

username

和

password

。但是当我点击

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);

而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;

从“React”导入React；
从“react dom”导入react dom；
从“./App/App”导入应用程序；
导入“/app/index.css”；
从“./app/route”导入路由；
从“redux”//导入存储导入{createStore}
从'react redux'导入{Provider}//导入提供程序
从“./app/reducers/index.js”导入myApp
let store=createStore（myApp）；
ReactDOM.render(
,
document.getElementById（'root'））
);
导出默认存储；

有两件事：1）

我意识到应用程序的状态应该在每个组件之外进行管理

=>这不是真的，您可以只使用React state，这很好。2） types.js是否定义了正在运行的日志？3） 减速器中的

动作类型是什么？您是否要组合还原程序来包含它？@BravoZulu 2）my type.js是，
export const LOG_IN='LOG_IN'；export const SIGN_UP='SIGN_UP'
3）和
reducer/index.js
is，
import{combineReducers}从'redux'导入登录名'。/logIn'import signUp from./signUp'const myApp=（）=>combineReducers（{logIn，signUp}）导出默认myApp
@BravoZulu 3）
操作。reducer中未定义类型
。我认为您不必执行
（）=>组合减速机（）
。您应该执行
constreducer=combineReducer（{…}）
并导出它reducer@BravoZulu
import{combineReducers}from'redux'import logIn from./logIn'import signUp from./signUp'const myApp=（）=>combineReducers（{logIn，signUp}）导出默认myApp
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;