React Native - 无法读取未定义的属性[PROPERTY]（ignite 2，reduxsauce）

Question

我在反应原生应用中使用redux时遇到问题。我不能在我的组件中调用一个动作。我收到以下错误：

这是我的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
})

这是我的组件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按钮调用userLogin函数。我也将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>
    )
  }
}

我不知道为什么没有检测到登录操作。

Answer 1

而不是import { AuthActions } from '../Redux/AuthRedux'，而是import AuthActions from '../Redux/AuthRedux'，因为您正在对您要立即导入的actionCreators执行export default。

您也可以export const AuthActions = Creators执行export default Creators，并且可以按照现在的方式保留import语句。