How to post data through api in react-native/redux? - react-native

Question

I am a beginner with react-native/redux, could not find a simple to use example of how to use an api call to post data in a redux app.So I tried doing mySelf. For backend I'm using express,nodejs,mongodb. If possible then give some reference of example.
type.js
export const POST_BOOKS_SUCCESS = "POST_BOOKS_SUCCESS"
BookAction.js
import {
POST_BOOKS_SUCCESS
} from "./types";
export const postBooksSuccess = ({ prop, value}) => ({
type:POST_BOOKS_SUCCESS,
payload:{ prop, value}
});
export const createBooks = ({title,description}) => {
console.log(title,description)
return (dispatch) => {
fetch("http://localhost:3000/api/Books",{
method:"POST",
headers:{
"content-type":"application/json"
},
body:JSON.stringify({title,description})
})
.then(res=>res.json())
.then(post => dispatch(postBooksSuccess({title,description})))
}
}
AddBookReducer.js
import {
POST_BOOKS_SUCCESS
} from "../actions/types";
const INITIAL_STATE = {
title:"",
description:""
};
export default (state = INITIAL_STATE, action)=>{
console.log(action);
switch(action.type){
case POST_BOOKS_SUCCESS:
return { ...state, [action.payload.prop]: action.payload.value }
default:
return state;
}
};
Addbook.js
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
KeyboardAvoidingView,
ScrollView,
TextInput,
TouchableOpacity
} from 'react-native';
import { connect } from 'react-redux';
import createBooks from "../redux/actions/BooksActions";
class AddBooks extends Component {
static navigationOptions = ({navigation}) => ({
// title: 'Add books',
headerTintColor: '#ffffff',
headerStyle: {
backgroundColor: '#2F95D6',
borderBottomColor: '#ffffff',
borderBottomWidth: 3,
},
headerTitleStyle: {
fontSize: 18,
},
});
onButtonPress() {
const { title, description } = this.props;
this.props.createBooks({ title, description })
}
render() {
return (
<View style={styles.container}>
<KeyboardAvoidingView
behavior="padding"
style={styles.container}>
<ScrollView>
<View>
<TextInput style={styles.textInput}
placeholder="Title"
placeholderTextColor="black"
underlineColorAndroid="rgba(0,0,0,0)"
onChangeText={text => this.props.createBooks({
prop:"title", value: text })}
value={this.props.title}
/>
</View>
<View>
<TextInput style={styles.textInput}
placeholder="Description"
placeholderTextColor="black"
underlineColorAndroid="rgba(0,0,0,0)"
onChangeText={text => this.props.createBooks({ prop:"description", value: text })}
value={this.props.description}
/>
</View>
<TouchableOpacity
style={styles.button}
onPress={this.onButtonPress.bind(this)}
>
<Text style={styles.buttonText}>
Submit
</Text>
</TouchableOpacity>
</ScrollView>
</KeyboardAvoidingView>
</View>
);
}
}
mapStateToProps = (state) => {
const {title,description} = state.addBookReducers;
return {
title,
description
}
}
export default connect(mapStateToProps,{createBooks})(AddBooks)
const styles = StyleSheet.create({
container:{
backgroundColor:"#EBF5FB",
flex:1
},
textInput:{
marginTop: 10,
fontSize:20,
height:50,
borderColor:"black",
borderWidth: 1,
width:"100%"
},
button:{
width:"100%",
backgroundColor: "#19B5FE",
marginVertical: 10,
paddingVertical: 16,
borderRadius: 30,
},
buttonText:{
fontSize:16,
fontWeight:"500",
textAlign:"center",
color:"black"
},
})
reducer/index.js
import { combineReducers } from "redux";
import BookReducers from "./BooksReducers";
import AddBookReducers from "./AddBookReducers";
export default combineReducers({
bookReducers: BookReducers,
addBookReducers: AddBookReducers
})