기본 네이티브 오류에 반 응 : 작업은 일반 개체 여야합니다. Aync 작업에 사용자 지정 미들웨어 사용

Question

로그인 프로세스의 일부로 처음으로 redux-thunk를 적용하고 있습니다. https://github.com/samrao2/manager-4

코드 조각 아래 :

LoginForm.js :

내 코드의 repo

여기

내 코드의 repo있다 : 나는 (빨간색 화면) 아래의 오류 여기에 있습니다 : https://github.com/samrao2/manager-4

코드 조각 :

작업 /하는 index.js :

import firebase from 'firebase'; 
import { EMAIL_CHANGED, 
     PASSWORD_CHANGED, 
     LOGIN_USER_SUCCESS 
} from './types'; 
//whenever the const variable below (action creator) is called 
//it will be called with some amount of text and it returns an action, the text 
//which is entered as an argument becomes the payload below 
export const emailChanged = (text) => { 
    return { 
    type: EMAIL_CHANGED, 
    payload: text 
    }; 
}; 
export const passwordChanged = (text) => { 
    return { 
    type: PASSWORD_CHANGED, 
    payload: text 
    }; 
}; 
export const loginUser = ({ email, password }) => { 
    //since we are using redux thunk/ async, the action creator now returns a function 
    //instead of an object. Redux Thunk will see that this is a function and run it 
    //the "then" will dispatch once the function is finisehd running 
    return (dispatch) => { 
    firebase.auth().signInWithEmailAndPassword(email, password) 
    .then(user => { 
     dispatch({ type: LOGIN_USER_SUCCESS, payload: user }); 
    }); 
}; 
}; 

loginform.js :

//we need this component to use react components library 
import React, { Component } from 'react'; 
//this connect helper that will connect the action to the login form 
import { connect } from 'react-redux'; 
//this is an action creator that we need to import in to connect with the reducers 
import { emailChanged, passwordChanged, loginUser } from '../actions'; 
//these are our pre-styled components 
import { Card, CardSection, Input, Button } from './common'; 

//login form is declared as an instance of the class "component" 
class Loginform extends Component { 
// this is the event handler as a method whose argument is text 
    onEmailChange(text) { 
//we have access to this prop from the action creator that is connected via the connect helper 
    this.props.emailChanged(text); 
    } 
    onPasswordChange(text) { 
    this.props.passwordChanged(text); 
    } 

    onButtonPress() { 
const { email, password } = this.props; 
this.props.loginUser({ email, password }); 
    } 
    render() { 
    return (

    <Card> 
     <CardSection> 
     <Input 
      label="Email" 
      placeholder="email@gmail.com" 
      onChangeText={this.onEmailChange.bind(this)} 
//this comes from mapStateToProps and WE tell the component what its value is 
//via the action creator and the reducer 
      value={this.props.email} 
     /> 
     </CardSection> 

     <CardSection> 
     <Input 
      secureTextEntry 
      label="Password" 
      placeholder="password" 
      onChangeText={this.onPasswordChange.bind(this)} 
      value={this.props.password} 
     /> 
     </CardSection> 

     <CardSection> 
     <Button onPress={this.onButtonPress.bind(this)}> 
      Login 
     </Button> 
     </CardSection> 
    </Card> 
); 
    } 
} 
//this function is from the react-redux library and helps to map some piece of state 
//onto the component 
const mapStateToProps = state => { 
    return { 
//the global state object contains another object called auth, which containts the email 
//property 
    email: state.auth.email, 
    password: state.auth.password 
    }; 
}; 

//we are connecting/binding our action creator via the connect helper 
//mapStateToProps is the first argument in the connect function 
export default connect(mapStateToProps, { 
    emailChanged, passwordChanged, loginUser 
})(Loginform); 

감속기 :

//this is importing the email changed variable instead of the string in the action 
import { EMAIL_CHANGED, 
     PASSWORD_CHANGED 
} from '../actions/types'; 

//we need to do this otherwise the initial value will be undefined and the 
//action will not work 
const INITIAL_STATE = { 
    email: '', 
    password: '' 
}; 

//this is the reducer below, its got 2 arguments, the state and action 
export default (state = INITIAL_STATE, action) => { 
    console.log(action); 
//this switch statement switches over the action type, and depending on type 
//the action decides what to do with it 
    switch (action.type) { 
    case EMAIL_CHANGED: 
    console.log('action!'); 
//make a new object, take all the properties of my current object and include in 
//that new object and take the email action.payload and include/overwrite that 
//in the new object created 
     return { ...state, email: action.payload }; 
    case PASSWORD_CHANGED: 
     return { ...state, password: action.payload }; 
    //if none of the cases come out to be true above, it will default to the 
    //beginning state with no changes 
    default: 
     return state; 
    } 
}; 

App.js :

import React, { Component } from 'react'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import firebase from 'firebase'; 
//reduxthnunk is helping us with aync operations, its a middlware 
//to help with this middleware we need a ahelper from Redux library 
// 
import ReduxThunk from 'redux-thunk'; 
import reducers from './reducers'; 
import LoginForm from './components/LoginForm'; 


class App extends Component { 
    componentWillMount() { 
    const config = { 
    apiKey: 'AIzaSyCCEY-CD1iSpSowupPZJcSuHEQ_yLvVzhg', 
    authDomain: 'manager-2714d.firebaseapp.com', 
    databaseURL: 'https://manager-2714d.firebaseio.com', 
    projectId: 'manager-2714d', 
    storageBucket: 'manager-2714d.appspot.com', 
    messagingSenderId: '191493388327' 
    }; 
    firebase.initializeApp(config); 
    } 
    render() { 
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); 
    return (
      <Provider store={store}> 
      <LoginForm /> 
     </Provider> 
    ); 
    } 
} 

export default App; 

Answer 1

render() { 
    return (
      <Provider store={createStore(reducers)}> 
      <LoginForm /> 
     </Provider> 
    ); 
    } 
} 

export default App; 

점에서 코드 : 여기문제는이 코드가 작동 할 것 썽크 요소를 포함하지 않는 GitHub의의의 repo에 다음 코드에 의해 입증 파일 app.js이 제대로 저장되지 것입니다 이 작업을 수행 할 수있는 동일한 파일은 다음과 같습니다.

render() { 
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk)); 
    return (
      <Provider store={store}> 
      <LoginForm /> 
     </Provider> 
    ); 
    } 
} 

export default App; 

파일을 올바르게 저장하면 문제가 해결되었습니다.