Getting response from redux function - reactjs

Question

I'm doing a react native app using redux.
I'll like to post some data to create a new document on database, which actionally works! But how I get the result of the function so I can check if there is any error?
Bellow involved lines of my code:
on the view:
handleCreatePostPress() {
const { createPost } = this.props;
const testPost =
{
"title": "TEST FROM APP",
"description": "My description",
}
console.log(JSON.stringify(this.state));
createPost(testPost);
}
....
<View style={{flex:1}}>
<View style={{justifyContent: 'center', alignItems: 'center', padding:20}}>
<Button style={{color:'#e0e0e0'}} block onPress={() => this.handleCreatePostPress()}>
<Text style={{color:'#ffffff', padding:10}}>CREATE POST</Text>
</Button>
</View>
</View>
.....
const mapStateToProps = (state) => {
return {
};
};
const mapDispatchToProps = {
createPost: createPostAction,
};
export default connect(mapStateToProps, mapDispatchToProps) (createPostScreen);
and my redux action code....
export const createPostSuccess = createAction('CREATE_POST_SUCCESS')
export const createPost = (data) => async (dispatch) => {
try {
const response = await api.posts.create(data);
dispatch(createPostSuccess(response.data));
} catch (error) {
dispatch(handleAPIError(error));
}
};
so how can I check here if there is an error:
createRaid(testRaid); // how to check if there is error, if has finished?
Thank you very much this is my first app on react native....

Answer 1

You cant return a result from a dispatch function.
What you can do instead is to process your data inside createPost.
If valid, dispatch as per normal,
if not, dispatch an error message.
This error message should be captured in your redux reducer, which the component will track and display errors accordingly.
import { useSelector } from 'react-redux';
export let myComponent = () => {
const errorMsg = useSelector(store => store.myReducer.errorMsg);
return (
<View>
<Button> {...}</Button>
<Text>{errorMsg}</Text>
</View>
)
}