ネイティブエラーに反応する：アクションはプレーンオブジェクトでなければならず、Ayncアクションにカスタムミドルウェアを使用する必要があります。

Question

ログインプロセスの一環として初めてredux-thunkを適用します。私は（赤画面）以下のエラーが表示されます。ここでは

は、私のコードのレポです：以下 https://github.com/samrao2/manager-4

コードスニペット：

LoginForm.js：

私のコードレポここにあります：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); 

REDUCER：

//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のレポで、次のコードによって証明されるように、ファイルapp.jsが正しく保存されなかったということですこの作業を行うファイルは次のとおりです。

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

export default App; 

ファイルを正しく保存すると問題が解決します。