ToastActionsCreators is not defined when using react-native-redux-toast - react-native

Question

I am unable to call ToastActionsCreators when using react-native-redux-toast
I get a ToastActionsCreators is not defined error when I call this.props.dispatch(ToastActionsCreators.displayInfo("Info toast!", 2000)); in my screen component. Anyone knows how to resolve this?
In my react native debugger, I am able to see the toast reducer passed in by react-native-redux-toast. However, I have a problem calling the actions
Thank you
Here is sample of my code
In Redux Screen
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);
In 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
});
I did not add any code to my actions file pertaining to react-native-redux-toast since its node needed
I am using react navigation createDrawerNavigator for navigation
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>
);
}
}
Full Code
https://github.com/myhendry/demo/tree/master/src/redux

Answer 1

You're not importing ToastActionCreators in ReduxScreen.js. That's why it's undefined; you haven't defined it anywhere in that file.

Answer 2

I finally managed to make it work! By doing below, it added in the dispatch function available in my props which allow me to call this.props.dispatch to dispatch the ToastActionCreators action creator to the store to show the toast.
Hope this will help others. Cheers
in my ReduxScreen.js, i added in the following...
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

I recommend using react-toastify package.
npm i --save 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>