如何使用redux中的axios库将数据发布到API服务器

Question

我有一个redux表单，我从中检索数据并尝试将其发布到我的API服务器。我的redux-form的代码如下：

    public class vmCustomers : DependencyObject, INotifyPropertyChanged 
    {
        protected ObservableCollection<Customer> _customers;
        public event PropertyChangedEventHandler PropertyChanged;

        public static DependencyProperty SelectedCustomerProperty =
            DependencyProperty.Register( "SelectedCustomer", typeof(Customer), typeof(vmCustomers),
                        new PropertyMetadata(default(Customer), new PropertyChangedCallback(OnSelectedCustomerChanged)));

        private static void OnSelectedCustomerChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            Customer value = (Customer)e.NewValue;
            vmCustomers vm = (vmCustomers)d;

            vm.OnPropertyChanged("SelectedCustomer");
        }

        public Customer SelectedCustomer
        {
            get { return (Customer)GetValue(SelectedCustomerProperty); }
            set { SetValue(SelectedCustomerProperty, value); }
        }


        public vmCustomers()
        {
            _customers = new ObservableCollection<Customer>();

            _customers.Add( new Customer() { CustomerID = 1, CustName = "John Doe" });
            _customers.Add(new Customer() { CustomerID = 2, CustName = "Johny Walker" });
            _customers.Add(new Customer() { CustomerID = 3, CustName = "Joe Foreman" });
            _customers.Add(new Customer() { CustomerID = 4, CustName = "Mike Tyson" });
            _customers.Add(new Customer() { CustomerID = 5, CustName = "Salvatore Ferragamo" });
            _customers.Add(new Customer() { CustomerID = 6, CustName = "Pato Donald" });
        }

        public ObservableCollection<Customer> Customers
        {
            get { return _customers; }
            set { _customers = value; }
        }

        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(name));
        }
    }

    public class vmOrders : DependencyObject ,INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected ObservableCollection<Order> _AllOrders;
        protected ObservableCollection<Order> _CustomerOrders = null;

        public static DependencyProperty SelectedCustomerProperty =
                    DependencyProperty.Register( "SelectedCustomer", typeof(Customer), typeof(vmOrders),
                        new FrameworkPropertyMetadata(default(Customer), new PropertyChangedCallback(OnSelectedCustomerPropertyChanged)));

        private static void OnSelectedCustomerPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            Customer value = (Customer)e.NewValue;
            vmOrders vm = (vmOrders)d;

            vm.ApplyFilter();
            vm.OnPropertyChanged("Orders");
        }

        public Customer SelectedCustomer
        {
            get {return (Customer)GetValue(SelectedCustomerProperty); }
            set { SetValue(SelectedCustomerProperty, value); }
        }

        public vmOrders()
        {
            _AllOrders = new ObservableCollection<Order>();

            _AllOrders.Add(new Order() { OrderID = 1, CustomerID = 1, Date = System.DateTime.Parse("2017-01-01"), TotalAmount = 100 });
            _AllOrders.Add(new Order() { OrderID = 2, CustomerID = 1, Date = System.DateTime.Parse("2017-01-02"), TotalAmount = 200 });
            _AllOrders.Add(new Order() { OrderID = 3, CustomerID = 1, Date = System.DateTime.Parse("2017-01-03"), TotalAmount = 300 });
            _AllOrders.Add(new Order() { OrderID = 4, CustomerID = 1, Date = System.DateTime.Parse("2017-01-04"), TotalAmount = 400 });
            _AllOrders.Add(new Order() { OrderID = 5, CustomerID = 2, Date = System.DateTime.Parse("2017-01-05"), TotalAmount = 500 });
            _AllOrders.Add(new Order() { OrderID = 6, CustomerID = 2, Date = System.DateTime.Parse("2017-01-06"), TotalAmount = 600 });
            _AllOrders.Add(new Order() { OrderID = 7, CustomerID = 3, Date = System.DateTime.Parse("2017-01-07"), TotalAmount = 700 });
            _AllOrders.Add(new Order() { OrderID = 8, CustomerID = 3, Date = System.DateTime.Parse("2017-01-08"), TotalAmount = 800 });
            _AllOrders.Add(new Order() { OrderID = 9, CustomerID = 3, Date = System.DateTime.Parse("2017-01-09"), TotalAmount = 900 });
            _AllOrders.Add(new Order() { OrderID = 10, CustomerID = 3, Date = System.DateTime.Parse("2017-01-10"), TotalAmount = 1000 });
            _AllOrders.Add(new Order() { OrderID = 11, CustomerID = 3, Date = System.DateTime.Parse("2017-01-01"), TotalAmount = 1200 });
            _AllOrders.Add(new Order() { OrderID = 12, CustomerID = 3, Date = System.DateTime.Parse("2017-01-01"), TotalAmount = 1400 });
            _AllOrders.Add(new Order() { OrderID = 13, CustomerID = 4, Date = System.DateTime.Parse("2017-01-01"), TotalAmount = 1200 });
            _AllOrders.Add(new Order() { OrderID = 14, CustomerID = 4, Date = System.DateTime.Parse("2017-01-01"), TotalAmount = 5450 });
            _AllOrders.Add(new Order() { OrderID = 15, CustomerID = 4, Date = System.DateTime.Parse("2017-01-01"), TotalAmount = 5020 });
            _AllOrders.Add(new Order() { OrderID = 16, CustomerID = 4, Date = System.DateTime.Parse("2017-01-01"), TotalAmount = 5020 });
            _AllOrders.Add(new Order() { OrderID = 17, CustomerID = 5, Date = System.DateTime.Parse("2017-01-01"), TotalAmount = 5030 });
            _AllOrders.Add(new Order() { OrderID = 18, CustomerID = 5, Date = System.DateTime.Parse("2017-01-01"), TotalAmount = 5050 });
        }

        public void ApplyFilter()
        {
            if (SelectedCustomer != null)
            {
                var linqresults = _AllOrders.Where(o => o.CustomerID == SelectedCustomer.CustomerID);
                _CustomerOrders = new ObservableCollection<Order>(linqresults);
            }
            else
            {
                _CustomerOrders = null;
            }
        }
        public ObservableCollection<Order> Orders
        {
            get {
                if (SelectedCustomer != null)
                    return _CustomerOrders;
                else
                    return _AllOrders;
            }
            set {
                _AllOrders = value;
                OnPropertyChanged("Orders");
            }
        }

        protected void OnPropertyChanged(string name)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
                handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

我的行动创建者用于将数据发布到API服务器：

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { createPosts } from '../actions/posts_action';

class CreatePost extends Component {
  constructor() {
    super();
    this.state = {
      selectValue : ''
  };
   this.renderCategory = this.renderCategory.bind(this);
}

  renderField(field) {
      return(
        <div className="title-design">
            <label className="label-design"> {field.label} </label>
            <input
              type="text"
              className="title-input"
              {...field.input}
            />
            <div className="text-help  has-danger">
              {field.meta.touched ? field.meta.error : ''}
            </div>
      </div>
      );
  }


  renderCategory(field) {
    return(
      <div className="title-design">
        <label className="label-design">{field.label} </label>
          <Field name="category" className="title-input" component="select">
            <option></option>
            <option value="react">React</option>
            <option value="redux">Redux</option>
            <option value="udacity">Udacity</option>
          </Field>

          <div className="text-help has-danger">
            {field.meta.touched ? field.meta.error : ''}
          </div>
      </div>
    );
  }

    onSubmit(values) {
      this.props.createPosts(values, () => {
          this.props.history.push('/');
      });
    }



    render() {
      const { handleSubmit } = this.props;

      return (
        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <Field
            label="Title for Post"
            name="title"
            component={this.renderField}
          />

          <Field
            label="Post Content"
            name="body"
            component={this.renderField}
          />

          <Field
            label="Category"
            name="category"
            component={this.renderCategory}
            />

          <button type="submit" className="btn btn-primary">Submit</button>
          <Link  to="/">
            <button className="cancel-button">Cancel</button>
          </Link>
        </form>
      );
    }
}

function validate(values) {
  const errors = {} ;

  if (!values.title) {
      errors.title = "Enter a title";
  }

  if (!values.body) {
    errors.body = "Enter some content";
    }

  if(!values.category) {
    errors.category = "Please select a category";
  }
  return errors;
}

export default reduxForm({
  validate : validate,          //validate
  form : 'CreatePostForm'
})(
  connect(null,{ createPosts })(CreatePost)
);

用于创建帖子的 reducer 是：

//Action Creator for creating posts
export function createPosts(values, callback) {
  const request = axios.post(`${API}/posts`,values,{headers})
    .then(() => callback());
    console.log(request);    
  return dispatch => {
    return request.then(({data}) => {
      dispatch({
        type: CREATE_POST,
        payload: data
      })
    })
  }
}

我所有减速器组合在一起的索引文件是：

import _ from 'lodash';
import { FETCH_POSTS, FETCH_POST, CREATE_POST } from '../actions/posts_action';

export default function(state = {}, action) {
  switch (action.type) {
    case FETCH_POST:
      // const post = action.payload.data;
      // const newState  = { ...state,  };
      // newState[post.id] = post;
      // return newState;
      return {...state, [action.payload.id]: action.payload};

    case FETCH_POSTS:
     return {posts: { ...state.posts, ...action.payload }};

    case CREATE_POST:
      return {posts: { ...state, ...action.payload}};

     default:
      return state;
  }

}

现在我遇到的问题是，当我尝试提交表单数据时，我收到错误，如下面的屏幕截图所示：

任何人都可以指导我做错了什么以及如何进行？

编辑1 整个项目的代码index.js文件如下：

import { combineReducers } from 'redux';
import PostReducer from './PostsReducer';
import { reducer as formReducer} from 'redux-form';
import CategoriesReducer from './CategoriesReducer';

const rootReducer = combineReducers({
    posts: PostReducer,
    categories: CategoriesReducer,
    form : formReducer
});

export default rootReducer;

编辑2：

我还在下面添加API服务器的文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route } from 'react-router-dom';
import thunk from 'redux-thunk';
import './index.css';
import App from './App';
import reducers from './reducers/index.js'
import Posts from './components/posts_index';
import CreatePost from './components/new_post';
import PostDetail from './components/post_detail';
import CategoryView from './components/category';
import { compose } from 'redux';

//const createStoreWithMiddleware = createStore(reducers,applyMiddleware(thunk));

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const createStoreWithMiddleware = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));

ReactDOM.render(
  <Provider store={createStoreWithMiddleware}>
      <BrowserRouter>
        <div>
          <Route  path="/new" component={CreatePost} />
          <Route path="/posts/:id" component={PostDetail} />
          <Route exact  path="/" component={Posts} />
          <Route path="/:category/posts" component={CategoryView} />
        </div>
      </BrowserRouter>
  </Provider>  , document.getElementById('root'));

Answer 1

更新：为动作创建者尝试此格式。 ：

export function createPosts(values, callback) {

  return dispatch => { //return function
    return axios.post(`${API}/posts`,values,{headers}) //return post request response
    .then((data) => { //pass data in as a parameter, call the callback, dispatch the action. 
        callback();

      dispatch({
        type: CREATE_POST,
        payload: data
      })
    })
  }
}