Question

使用react-native-redux-toast时，我无法调用ToastActionsCreators

当我调用this.props.dispatch（ToastActionsCreators.displayInfo（“ Info toast！”，2000））时，出现ToastActionsCreators未定义错误。在我的屏幕组件中。有人知道如何解决这个问题吗？

在我的本机调试器中，我能够看到由react-native-redux-toast传递的Toast Reducer。但是，我在调用操作时遇到了问题

谢谢

这是我的代码示例

在Redux屏幕上

class ReduxScreen extends Component {
  _displayInfoToast = () => {
    this.props.dispatch(ToastActionsCreators.displayInfo("Info toast!", 2000));
  };

  render() {
    console.log(this.props);
    const { counter } = this.props.test;
    const { textStyle } = styles;

    return (
      <View>
        <Text style={textStyle}>{counter.toString()} </Text>
        <Button title="INCREMENT" onPress={this.props.incrementCounter} />
        <Button title="DECREMENT" onPress={this.props.decrementCounter} />
        <Button title="SHOW TOAST" onPress={this._displayInfoToast} />
      </View>
    );
  }
}

const mapStateToProps = state => {
  // console.log(state);
  return {
    test: state.test
  };
};

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      incrementCounter,
      decrementCounter
    },
    dispatch
  );
};

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

在reducers / index.js中

import { combineReducers } from "redux";
import testReducer from "./testReducer";
import { toastReducer as toast } from "react-native-redux-toast";

export default combineReducers({
  // test: () => []
  test: testReducer,
  toast
});

我没有在我的动作文件中添加任何有关react-native-redux-toast的代码，因为它的节点是必需的

我正在使用反应导航createDrawerNavigator进行导航

App.js

class App extends Component {
  constructor(props) {
    super(props);
    console.ignoredYellowBox = ["Setting a timer"];
  }
  render() {
    return (
      <ApolloProvider client={client}>
        <Provider store={store}>
          <MyProvider>
            <Drawer />
            <Toast messageStyle={{ color: "white" }} />
          </MyProvider>
        </Provider>
      </ApolloProvider>
    );
  }
}

完整代码 https://github.com/myhendry/demo/tree/master/src/redux

Answer 1

您没有在ReduxScreen.js中导入ToastActionCreators。这就是为什么它是不确定的。您尚未在该文件的任何位置定义它。

Answer 2

我终于设法使其成功！通过执行以下操作，它添加了我的props中可用的dispatch函数，该函数允许我调用this.props.dispatch将ToastActionCreators动作创建者分派到商店以显示Toast。

希望这会对他人有所帮助。干杯

在我的ReduxScreen.js中，我在以下内容中添加了...

import { Text, View, Button, StyleSheet } from "react-native";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { ToastActionsCreators } from "react-native-redux-toast";

import { incrementCounter, decrementCounter } from "./actions/index";

  _displayInfoToast = () => {
    this.props.dispatch(ToastActionsCreators.displayInfo("Info toast!", 2000));
  };

const mapDispatchToProps = dispatch => {
  return {
    dispatch,
    ...bindActionCreators({ incrementCounter, decrementCounter }, dispatch)
  };
};

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

Answer 3

我建议使用 react-toastify 软件包。

npm i-保存react-toastify

// Simply import these two objects:  
import { ToastContainer, toast } from 'react-toastify';     

  // Then make a toast function, something like this:
        success = () => toast.info("Data successfully saved", { autoClose: 2000 });

  // Somewhere in your code use your success toast function, like this:

saveNewUser = (data) => {
        getUsers.addUser(data).then(res=> {
            this.success();                     // Here we trigger the that toast        
        }).catch(error => {
            console.log('error while adding new user', error);
            throw(error);
        })
    }

    render() {
            const {userData} = this.state;
    return (
            <div className="container">

            // ...your logic goes here. This is just my example:
                       <table>
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Date</th>
                                <th>Amount</th>
                                <th>Description</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            {userData}
                            </tbody>
                        </table>

        // Here we trigger our function that will also trigger our success toast :)
                        <button type="button"
                         onClick={this.saveNewUser}>   
                         Save new user </button>

       // Then just before the last closing </div> insert this
      <ToastContainer autoClose={3000} closeOnClick />
</div>

使用react-native-redux-toast时未定义ToastActionsCreators

3 个答案: