Redux 操作未映射到反应道具答案

【问题标题】：Redux actions are not mapped to react propsRedux 操作未映射到反应道具
【发布时间】：2017-10-11 22:15:39
【问题描述】：

我正在制作我的第一个 react-native 应用程序，但我似乎无法将我的操作绑定到道具。在组件中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())
);

【问题讨论】：

如果LoginActions 是您的mapDispatchToProps 中的一个空对象，那么您可能没有正确导出/导入函数。
@kngroo 好吧，我已经将操作文件和商店附在了那里。我看不出它是如何不正确地导出的，尽管我最初确实认为自己是
这很奇怪。如果 LoginActions 为空对象，则表示未导入函数。你确定这条路径'../../actions/Login.actions' 是正确的吗？里面有没有一个叫Login.actions的目录？
@kngroo 它是一个 js 文件，但据我所知，我不需要扩展名。它肯定在那里。我得到了智能感知信息
单独导入动作时会发生什么？ import {getUser, saveUser} from '../../actions/Login.actions'

标签： reactjs react-native redux react-redux redux-thunk

【解决方案1】：

JSON.stringify 从其输出中去除函数，因此，动作和调度程序在警报输出中不可见。

【讨论】：