私の反応するネイティブアプリでreduxを使用する際に問題があります。自分のコンポーネントでアクションを呼び出すことはできません。私は次のエラーを取得する:React Native - 未定義のプロパティ[PROPERTY]を読み取ることができません(ignite 2、reduxsauce)
これは私の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>
)
}
}
にプロバイダに与えられています。
ありがとうございました!私はそれを気づかなかったとは信じられません。私はReact Nativeを学んでいます。エラーは消えましたが、AuthReduxのexport const userLoginにブレークポイントを設定しましたが、その関数で停止しません。何か他のものがありませんか? – Axort
ああ!私は問題を発見した。 [Types.USER_LOGIN]の代わりに[Types.LOGIN]を実行しました。私はタイプの代わりに減速機でSCREAMING_SNAKE_CASEをやっていました。 – Axort