Question

我一直在努力学习这是一个使用Redux的简单登录，注销应用程序。从Display.js按下登录按钮时，应调用 login_action 函数。但是标题无法读取未定义的属性login_action 时出现错误。我尝试在Display.js中记录道具，我能够看到日志中的函数，但不知何故函数没有被调用。我错过了什么或者找不到什么？

基本应用程序：

/* App.js */
import React, {Component} from 'react';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';

import * as reducers from './reducers';
import SceneContainer from './containers/SceneContainer';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <SceneContainer />
      </Provider>
    );
  }
}

容器：

/* containers/SceneContainer.js */
'use strict';

import React, {Component, PropTypes} from 'react';
import Display from '../components/display';
import * as loginActions from '../actions/';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class SceneContainer extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {actions} = this.props;
    console.log(actions);
    return (
      <Display {...actions}/>
    );
  }
}
SceneContainer.propTypes = {
  user: PropTypes.object.isRequired,
  actions: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {user: state.auth.user};
}
function mapDispatchToProps(dispatch) {
  console.log(loginActions);
  return {
    actions: bindActionCreators(loginActions, dispatch)
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(SceneContainer);

组件：

/* components/display.js */
import React, {Component, PropTypes} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
} from 'react-native';

class Display extends Component {
  constructor(props) {
    super(props);
    console.log(props.login_action);
  }
  onLoginPress() {
    this.props.login_action({
      username: 'ranat',
      password: 'password'
    });
  }
  onLogoutPress() {
    this.props.logout_action();
  }
  render() {
    return (
      <View>
        <TouchableHighlight onPress={this.onLoginPress}>
          <Text>Login</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={this.onLogoutPress}>
          <Text>Logout</Text>
        </TouchableHighlight>
      </View>
    );
  }
}
Display.propTypes = {
  logout_action: PropTypes.func.isRequired,
  login_action: PropTypes.func.isRequired
};

export default Display;

动作档案：

/* actions/index.js */
import {LOGIN_ACTION, LOGOUT_ACTION, LOGIN_SUCCESS, LOGIN_FAILURE} from './actionTypes';

export var login_action = (userCredentials) => {
  if(userCredentials.username === 'ranat' && userCredentials.password === 'password') {
    return {
      type: LOGIN_ACTION,
      value: LOGIN_SUCCESS,
    };
  }
  else {
    return {
      type: LOGIN_ACTION,
      value: LOGIN_FAILURE,
    };
  }
};

export var logout_action = () => {
  return {
    type: LOGOUT_ACTION,
  }
};

减速器：

/* reducers/login.js */
import {LOGIN_ACTION, LOGOUT_ACTION, LOGIN_SUCCESS, LOGIN_FAILURE} from '../actions/actionTypes'

let cloneObject = (obj) => {
  if(obj)
    return JSON.parse(JSON.stringify(obj));
  else
    return {};
}

const initialState = {
  user: {
    loggedIn: false,
  },
};
const auth = (state = initialState, action = {}) => {
  switch(action.type) {
    case LOGIN_ACTION: {
      if(action.value === LOGIN_SUCCESS) {
        return {
          ...state,
          user: {
            loggedIn: true
          }
        };
      }else {
        return {
          ...state,
          user: {
            loggedIn: false
          }
        };
      }
    }
    case LOGOUT_ACTION: {
      if(action.value === LOGIN_SUCCESS) {
        return {
          ...state,
          user: {
            loggedIn: false
          }
        };
      }else {
        return state;
      }
    }
    default: {
      return state || initialState;
    }
  }
}

export default auth;

/* reducers/index.js */
import { combineReducers } from 'redux';
import auth from './login';

export {
  auth,
};

Answer 1

将onPress={this.onLoginPress}更改为onPress={this.onLoginPress.bind(this}。

同样对onPress={this.onLogoutPress}执行相同操作。

Redux与React Native - 无法访问属性功能

1 个答案: