如何通过API在react-native / redux中发布数据？

Question

我是react-native / redux的初学者，找不到如何使用api调用在redux应用程序中发布数据的简单示例。因此，我尝试了mySelf。对于后端，我使用express，nodejs，mongodb。如果可能的话，请举一些例子。

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
})