Question

所以基本上我想将这个包实现到我的应用程序中。

https://github.com/Wolox/react-native-redux-toast

但是当我尝试遵循他们的方法时，我会陷入这个问题。

我卡住了，因为我想通过redux使用这个烤面包机库但当我这样做时，我收到错误消息：this.props.dispatch不是一个函数。 bla bla dispatch undefined。

下面是我可以调用Toaster的代码，但是操作不起作用：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  Button,
  View
} from 'react-native';


import { List, ListItem, Divider } from 'react-native-elements'
import { Icon } from 'react-native-elements';
import { Ionicons } from '@expo/vector-icons';
import * as actions from '../actions';
// import { prioritiesFetch } from '../actions';

import { ToastActionsCreators } from 'react-native-redux-toast';
import { connect } from 'react-redux';

class FollowupScreen extends Component {

  constructor(props){
          super(props);
      }


  componentWillMount(){
    console.log('24---  componentWillMount  in FollowupScreen');
     this.props.prioritiesFetch();
  }




        someFunction = () => {
          console.log(' someFunction called');
          // navigation.navigate('Search');
        }


        static navigationOptions = ({ navigation }) => {

          const {state, setParams} = navigation;
          return {
            title: 'Follow Up',
            tabBarIcon:  ({ tintColor }) => {
                return <Icon name="phone" size={25} color={tintColor} />;
            }
          };
        };


    displayInfoToast = () => {
        console.log( '  65 -  ToastActionsCreators ' ,  ToastActionsCreators );
        console.log('64-  this.props = ', this.props );
      this.props.dispatch(ToastActionsCreators.displayInfo('Info toast!'));
    };


    displayErrorToast = () => {
      console.log( '  65 -  ToastActionsCreators ' ,  ToastActionsCreators );
      console.log('64-  this.props = ', this.props );

        this.props.dispatch(ToastActionsCreators.displayError('Error toast!'));
      };

      displayWarningToast = () => {
          console.log('64-  this.props = ', this.props );
        this.props.dispatch(ToastActionsCreators.displayWarning('Warning toast!'));
      };



    render() {
      const { navigate } = this.props.navigation;

      return (
        <View  style={{ }}>
          <Button title={'Info Toast!'} onPress={this.displayInfoToast} />
          <Button title={'Warning Toast!'} onPress={this.displayWarningToast} />
          <Button title={'Error Toast!'} onPress={this.displayErrorToast} />

          <ScrollView>
            <List>
              <ListItem
                  onPress={() => navigate('allProperties')}
                  title="All Properties                                   199"
                  leftIcon={{name: 'flight-takeoff'}}
                  color="rgba(0,122,255,1)"
              />

              </ScrollView>

        </View>

      );
    }
    }



export default connect(null) (FollowupScreen);

store.js

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers';

const store = createStore(
    reducers,
    {},
    compose (
      applyMiddleware(thunk)
  )
);


export default store;

减速器：

import { combineReducers } from 'redux';
import auth from './auth_reducer';
import Fruits from './FruityFormReducer';
import { reducer as form } from 'redux-form'

import { toastReducer as toast } from 'react-native-redux-toast';

export default combineReducers({
  Fruits,
  toast,
});

如果我尝试添加如下所示的操作，

export default connect(null, {propertiesFetch}) (FollowupScreen);

或

export default connect(null, actions) (FollowupScreen);

我收到此错误：

Answer 1

您将无法访问道具中的调度功能。如果将任何参数传递给connect函数，它将是未定义的。有两种方法可以做到这一点。

方式1

呼叫

connect()(FollowUpScreen) // without any argument to connect function.

现在您可以使用this.props.dispatch（），因为您已经在做

方式2

执行以下操作（我更喜欢这个）：

创建一个名为mapDispatchToprops的函数

const mapDispatchToProps = (dispatch) => ({
    displayError: (msg) => dispatch(ToastActionsCreators.displayError(msg)),
    displayWarning: (msg) => dispatch(ToastActionsCreators.displayWarning(msg)),
});

您可以以类似的方式添加其他操作。现在使用上面的函数连接组件作为连接参数，如下所示：

export default connect(null, mapDispatchToprops) (FollowupScreen);

现在，这将在您的组件道具中添加以下功能：

displayError(msg) and displayWarning(msg)

你可以按如下方式打电话给他们：

this.props.displayError('Error Message');

this.props.displayWarning('Warning !!!');

Answer 2

如果你想保留所有的东西，只需将你的函数添加到道具中，从组件中删除你的函数，然后从你的函数中删除调度调用，因为它们返回动作对象，在连接后，redux将这个函数包装为auto-在调用之后调度它们（阅读redux文档）：

const displayInfoToast = () => {
    console.log('  65 -  ToastActionsCreators ', ToastActionsCreators);
    console.log('64-  this.props = ', this.props);
    return ToastActionsCreators.displayInfo('Info toast!'); };

export default connect(null, { displayInfoToast }) (FollowupScreen);

无法从类组件调用Actions。错误：在实现reducer时，This.props.dispatch不是函数

2 个答案: