Question

我收到错误：

Actions may not have an undefined "type"财产。

但我确定我已将其定义并拼写正确。

应用：

import React, {Component} from 'react';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { AsyncStorage } from 'react-native';
import thunk from 'redux-thunk';
import {persistStore, autoRehydrate} from 'redux-persist';
import FBLoginView from '../components/FBLoginView'

import * as reducers from '../reducers';
import Routing from './Routing';

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

persistStore(store, {
    storage: AsyncStorage,
    }, () => {
})

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

操作：

import * as types from './actionTypes';

export function getFacebookUser(user) {
  return {
    type: types.GET_FACEBOOK_USER,
    user: user,
  };
}

类型：

export const GET_FACEBOOK_USER = 'GET_FACEBOOK_USER';

减速机：

import * as types from '../actions/actionTypes';

const initialState = {
  user: {},
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case types.GET_FACEBOOK_USER:
      return {
        ...state,
        user: action.user
      };
    default:
      return state;
  }
}

编辑（我的主页.js页面）

import React, { Component } from 'react'
import { View, Text, StyleSheet, Image, TouchableHighlight } from 'react-native'
import { Actions } from 'react-native-router-flux'
import {FBLogin, FBLoginManager} from 'react-native-facebook-login'
import FBLoginView from '../components/FBLoginView'
import * as facebookActions from '../actions/facebookActions';
import { connect } from 'react-redux'
import {bindActionCreators} from 'redux'

class Home extends Component {
    constructor(props) {
      super(props);

      this.state = {
        login: false
      };

      console.log(this.props)
    }

  render() {
    let { facebook, actions } = this.props
    _onLogin = (e) => {
        actions.getFacebookUser(e.profile)
        console.log(facebook)
    }

    _onLogout = (e) => {
        console.log(e)
    }

    return (
      <View style={styles.background}>
            <Text>{this.state.login ? "Logged in" : "Logged out"}</Text>
            <FBLogin
                buttonView={<FBLoginView />}
                ref={(fbLogin) => { this.fbLogin = fbLogin }}
                loginBehavior={FBLoginManager.LoginBehaviors.Native}
                permissions={["email","user_friends"]}
                onLogin={function(e){_onLogin(e)}}
                onLoginFound={function (e){console.log(e)}}
                onLoginNotFound={function(e){console.log(e)}}
                onLogout={function(e){_onLogin(e)}}
                onCancel={function(e){console.log(e)}}
                onError={function(e){console.log(e)}}
                onPermissionsMissing={function(e){console.log(e)}}
                style={styles.fbButton}
                passProps={true}
              />
      </View>
    )
  }
}

export default connect(store => ({
    facebook: store.facebook.user,
  }),
  (dispatch) => ({
    actions: bindActionCreators(facebookActions, dispatch)
  })
)(Home);

const styles = StyleSheet.create({
  background: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#00796B',
  },
});

Answer 1

我不认为你正确地发送了这个动作：

actions.getFacebookUser(e.profile)

是一个动作创建者，只会返回动作，而不是发送动作。

我无法看到您与 Connect 联系的 Home 组件，但我猜这是事件的来源您将要作为操作发送。为什么不尝试直接针对商店进行调度，然后转而使用 connect 来连接 mapDispatchToProps ？最后，如果有必要，可以使用 bindActionCreators 。

有两个非常好的（免费）egghead.io课程将在这里帮助，丹·阿布拉莫夫：

https://egghead.io/courses/getting-started-with-redux

https://egghead.io/courses/building-react-applications-with-idiomatic-redux

而docs也非常好，但我想你已经看过了。

看到更多代码后，我无法看到您连接的组件（ Home ）是如何链接其事件的（例如 onLogin ）发送财产。我可以看到它调用自己的内部函数_onLogin，但这又调用了动作创建者，它不会发送。

connect函数允许您将组件（此处为 Home ）的属性与redux存储连接;在您的示例中，它有效地链接了“onLogin”＃39;具有特定操作的Home组件的属性，然后可以将该操作分派给商店。

因此，您的Home组件需要接受类似于＆＃39; onLogin＆＃39;那它可以调用; mapDispatchToProps 是您编写的函数，用于将您的子组件的属性结合到调度操作中。 bindActionCreators 只是绑定到动作创建者的另一个帮手;在您当前的用例中可能有点过分。

丹·阿布拉莫夫对此的解释比我能好得多，所以请看文档，但也可以在这里看到他的答案：

How to get simple dispatch from this.props using connect w/ Redux?

获取＆＃34;动作可能没有未定义的＆＃34;类型＆＃34;＆＃34;

1 个答案: