Question

我正在制作我的第一个本机应用程序，我似乎无法将我的行为绑定到道具上。在组件this.props.actions中为空，LoginActions也是mapDispatchToProps函数中的空对象。这让我相信它在动作或连接绑定中的问题。谁能看到我出错的地方？

组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {
  View,
  StyleSheet,
} from 'react-native';
import {
  google,
  facebook,
  twitter,
} from 'react-native-simple-auth';
import LoginConstants from '../../constants/Login.constants';
import * as LoginActions from '../../actions/Login.actions';
import LoginForm from '../../components/LoginForm';

class Login extends Component {
  constructor(props) {
    super(props);
    alert(JSON.stringify(this.props.actions))
    this.loginActions = {
      google,
      facebook,
      twitter,
    };

    this.loginAction = this.loginAction.bind(this);
  }

  loginAction(platform) {
    alert(JSON.stringify(this.props.actions))
    // this.loginActions[platform](LoginConstants[platform])
    //   .then((info) => {
    //     alert(info);
    //     // info.user - user details from the provider
    //     // info.credentials - tokens from the provider
    //   }).catch((error) => {
    //     throw Error(`Error ${error.code}: ${error.description}`);
    //   });
  }

  render() {
    return (
      <LoginForm actions={this.loginActions} loginAction={this.loginAction} />
    );
  }
}

Login.propTypes = {
  actions: PropTypes.object.isRequired,
  user: PropTypes.object
};

const styles = StyleSheet.create({
});

const mapStateToProps = (state) => {
  return {
    user: state.user
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(LoginActions, dispatch)
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);

操作：

import LoginConstants from '../constants/Login.constants';

export function getUser(userId) {
  return {
    type: LoginConstants.actions.getUser,
    payload: new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          userId: '123ddgs',
        });
      }, 2000);
    });
  };
};

export function saveUser(user) {
  return {
    type: LoginConstants.actions.saveUser,
    payload: new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          userId: '123ddgs',
        });
      }, 2000);
    })
  };
};

减速机：

import LoginConstants from '../constants/Login.constants';

const loginReducers = (state = {
  user: {},
  prevStates: []
}, action) => {
  switch (action.type) {
    case LoginConstants.actions.getUser:
      state = {
        ...state,
        user: action.payload,
        prevStates: [...state.prevStates, action.payload]
      };
      break;

    case LoginConstants.actions.saveUser:
      state = {
        ...state,
        user: action.payload,
        prevStates: [...state.prevStates, action.payload]
      };
      break;
  }

  return state;
};

export default loginReducers;

商店：

import {
  createStore,
  combineReducers,
  applyMiddleware,
} from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import { createLogger } from 'redux-logger';
import loginReducers from './src/reducers/Login.reducers';
import beerReducers from './src/reducers/Beer.reducers';

export default createStore(
  combineReducers({
    loginReducers,
    beerReducers,
  }),
  {},
  applyMiddleware(createLogger(), thunk, promise())
);

Answer 1

JSON.stringify从其输出中剥离函数，因此，警报输出中不会显示操作和调度程序。

Redux动作未映射到反应道具

1 个答案: