2016-09-27 3 views
0

Извините, но я новичок Redux и реагироватьRedux-React: Аутентификация - рендер не определена

У меня есть некоторый код, следовать примеру на StackOverflow, и генерировать ошибку, но я не знаю, фиксирования, кто-нибудь помочь мне

действия/login.js

export const LOGIN = 'LOGIN'; 
export const LOGOUT = 'LOGOUT'; 

export function login(login, password) { 
    return { 
     type: LOGIN, 
     login, 
     password 
    } 
} 

компоненты/LoginForm.js

import { Component, PropTypes } from 'react' 

class LoginForm extends Component { 
    render() { 
    console.log("LoginForm") 
     return (
     <div> 
      <form action="#" onSubmit={(e) => this.handleSubmit(e)}> 
       <input type="text" ref={node => { this.login = node }} /> 
       <input type="password" ref={node => { this.password = node }} /> 
       <input type="submit" value="Login" /> 
      </form> 
     </div> 
    ) 
    } 

    handleSubmit(e) { 
     e.preventDefault(); 
     this.props.onSubmit(this.login.value, this.password.value); 
    } 
} 

LoginForm.propTypes = { 
    onSubmit: PropTypes.func.isRequired 
}; 

export default LoginForm; 

контейнеры/А pp.js

import { Component } from 'react' 
import { connect } from 'react-redux' 
import { login } from '../actions/login' 
import LoginForm from '../components/LoginForm' 

class App extends Component { 
    render() { 

     const { dispatch } = this.props; 

     return (
     <div> 
      <LoginForm onSubmit={(id, pass) => dispatch(login(id, pass))} /> 
     </div> 
    ) 
    } 
} 

const mapStateToProps = (state) => { 
    return {} 
}; 
const mapDispatchToProps = (dispatch) => { 
    return {} 
}; 
export default connect(mapStateToProps, mapDispatchToProps)(App); 

Редукторы/rootReducer.js

import { combineReducers } from 'redux' 
import { LOGIN, LOGOUT } from '../actions/login' 

const initialState = { 
    cid: null, 
    username: '', 
    logo: '' 
}; 

const userLogin = (state = initialState, action) => { 

    switch (action.type) { 
     case LOGIN: 

     console.log("login"); 

     return state; 

     case LOGOUT: 
     //... 
     return state; 

     default: 
     console.log("default"); 
     return state; 
    } 
}; 

const rootReducer = combineReducers({ 
    userLogin 
}); 

export default rootReducer; 

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { createStore } from 'redux'; 
import { Provider } from 'react-redux'; 
import App from './containers/App' 
import rootReducer from './reducers/rootReducer' 

let storelogin = createStore(rootReducer); 
let rootElement2 = document.getElementById('root'); 
console.log("index"); 
ReactDOM.render(
    <Provider store={storelogin}> 
     <App /> 
    </Provider>, 
    rootElement2 
); 

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Soundcloud Client</title> 
    </head> 
    <body> 
    <div id="app"></div> 
    <div id="counter"></div> 
    <div id="root"></div> 
    <div id="hellouni"></div> 
    </body> 
</html> 

Когда сборка OK, но запустить локальный: 8080, то я получаю ошибку: Uncaught ReferenceError: рендер не определен

Кто-нибудь мне помогает?

+0

какая версия среагировать-дом у вас есть? – Devnegikec

ответ

1

Вам также следует импортировать React.

import React, { Component } from 'react'

+0

Спасибо, я пропустил Реагировать на App.js и LoginForm.js, но я не знаю, зачем добавлять React, я использую только Component, должен ли я добавить компонент –

+0

Ваш прием. :) Как говорит Дэн: _JSX хочет Реагировать в области ._ https://discuss.reactjs.org/t/es6-import-as-react-vs-import-react/360/3 – Garrett

+0

Когда вы строите все Everythings OK, но нажмите кнопку login error generate «app.js: 31819 Uncaught TypeError: отправка не является функцией», код неправильный? –

Смежные вопросы