2017-08-01 6 views
0

私の反応するネイティブアプリでreduxを使用する際に問題があります。自分のコンポーネントでアクションを呼び出すことはできません。私は次のエラーを取得する:React Native - 未定義のプロパティ[PROPERTY]を読み取ることができません(ignite 2、reduxsauce)

Simulator

これは私のAuthRedux.js

import { createReducer, createActions } from 'reduxsauce' 
import Immutable from 'seamless-immutable' 

const { Types, Creators } = createActions({ 
    login: ['email', 'password'], 
    logout: null 
}) 

export const AuthTypes = Types 
export default Creators 

export const INITIAL_STATE = Immutable({ 
    isLoggedIn: false, 
    email: null, 
    password: null 
}) 

export const userLogin = (state, {email, password}) => { 
    return Object.assign({}, state, { 
     isLoggedIn: true 
    });//state.merge({ isLoggedIn: true, email, password}) 
} 

export const userLogout = (state) => { 
    return state.merge({ isLoggedIn: false, email: null, password: null }) 
} 

export const reducer = createReducer(INITIAL_STATE, { 
    [Types.USER_LOGIN]: userLogin, 
    [Types.USER_LOGOUT]: userLogout 
}) 

であり、これは私がuserloginのを呼び出すためにしようとしている私のコンポーネントLoginScreen.js

import React, { Component } from 'react' 
import { ScrollView, Text, KeyboardAvoidingView, TextInput, TouchableOpacity, Button } from 'react-native' 
import { connect } from 'react-redux' 
import { AuthActions } from '../Redux/AuthRedux' 
// Add Actions - replace 'Your' with whatever your reducer is called :) 
// import YourActions from '../Redux/YourRedux' 

// Styles 
import styles from './Styles/LoginScreenStyle' 

class LoginScreen extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     email: '', 
     password: '', 
     opacity: 1.0, 
     isLoggedIn: false 
    } 
    } 

    render() { 
    return (
     <ScrollView style={styles.container}> 
     <KeyboardAvoidingView behavior='position'> 
      <Text>LoginScreen</Text> 
      <TextInput style={{width: 100, backgroundColor: 'red', height: 50, marginTop: 10}} onChangeText={(text) => this.setState({email : text})}/> 
      <TextInput style={{width: 100, backgroundColor: 'yellow', height: 50, marginTop: 10}} onChangeText={(text) => this.setState({password : text})}/> 
      <Button title='Hola' onPress={this.onLogin}/> 
     </KeyboardAvoidingView> 
     </ScrollView> 
    ) 
    } 

    onLogin =() => { 
    console.log(this.state.email); 
    this.setState({opacity: 0.5}) 
    this.props.userLogin(this.state.email, this.state.password); 
    } 

    handleOnPress =() => { 
    this.setState({opacity: 0.5}) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    isLoggedIn: state.auth.isLoggedIn 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    userLogin: (email, password) => dispatch(AuthActions.login(email, password)) 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen) 

です機能は、のmapDispatchToPropsで割り当てられたonPressボタンから取得できます。私はまた私のrootReducerは次のように設定している:

const rootReducer = combineReducers({ 
    nav: require('./NavigationRedux').reducer, 
    github: require('./GithubRedux').reducer, 
    search: require('./SearchRedux').reducer, 
    auth: require('./AuthRedux').reducer 
    }) 

や店舗は、ログインアクションが検出されない理由を私は知らないApp.js

class App extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <RootContainer /> 
     </Provider> 
    ) 
    } 
} 

にプロバイダに与えられています。

答えて

1

import { AuthActions } from '../Redux/AuthRedux'の代わりに、export defaultを今すぐインポートするactionCreatorsで実行しているため、import AuthActions from '../Redux/AuthRedux'を実行してください。

export default Creatorsを実行しているところでexport const AuthActions = Creatorsを実行することもできます。また、今すぐ同じ方法でimportの文を保存することができます。

+0

ありがとうございました!私はそれを気づかなかったとは信じられません。私はReact Nativeを学んでいます。エラーは消えましたが、AuthReduxのexport const userLoginにブレークポイントを設定しましたが、その関数で停止しません。何か他のものがありませんか? – Axort

+0

ああ!私は問題を発見した。 [Types.USER_LOGIN]の代わりに[Types.LOGIN]を実行しました。私はタイプの代わりに減速機でSCREAMING_SNAKE_CASEをやっていました。 – Axort

関連する問題