您的 redux 动作创建者必须是普通的、对象的，并且应该使用强制 key 进行调度和动作type。但是，使用自定义中间件，就像redux-thunk您可以axios在动作创建者中调用请求一样，如果没有自定义，middlewares您的动作创建者需要返回普通对象

你的动作创建者看起来像

export function create (values) {

  return (dispatch) => {
     dispatch({type: CREATE_ORGANIZATION});
     axios.post('/url', values)   
        .then((res) =>{
            dispatch({type: CREATE_ORGANIZATION_SUCCESS, payload: res});
        })
        .catch((error)=> {
            dispatch({type: CREATE_ORGANIZATION_FAILURE, payload: error});
        })
  }

}

你的减速机看起来像

export default (state = initialState, action) => {
  const payload = action.payload

   switch (action.type) {    
    case CREATE:    

      return {
        ...state,
        loading: true,
        loaded: false
      }

    case CREATE_SUCCESS:
      return {
        ...state,
        data: state.data.concat(payload.data),
        loading: false,
        loaded: true,
        error: null
      }   

      }

    case CREATE_FAILURE:

      return {
        ...state,
        loading: false,
        loaded: true,
        error: payload
      }
    default:
      return state
  }
}

现在在创建商店时，您可以这样做

import thunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
const store = createStore(
  reducer,
  applyMiddleware(thunk)
);

除此之外，您还需要设置 redux 表单

您需要使用 combineReducers 和 Provider 来传递商店

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

export const rootReducer = combineReducers({
   reducer,
   form: formReducer
})

代码沙盒

在 redux-saga 的帮助下，您可以轻松做到这一点。

关于 redux-saga：

redux-saga 是一个旨在使应用程序副作用（即异步事物，如数据获取和不纯事物，如访问浏览器缓存）更易于管理、更有效地执行、更易于测试和更好地处理故障的库。

安装：

$ npm install --save redux-saga 

或者

$ yarn 添加 redux-saga

请参考链接：https : //github.com/redux-saga/redux-saga

Redux 动作创建者显然不支持异步动作，而这正是您试图对 post 请求执行的操作。Redux Thunk 应该对此有所帮助。

你需要一个看起来像这样的 store.js 文件：

//npm install --save redux-thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducer.js';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk) //needed so you can do async
);

这是您的操作文件的外观。Create 成为一个动作创建者，它返回一个函数，然后执行发布请求，并允许您在那里进行分派，从而允许您更新您的商店/状态。：

import axios from 'axios'
import { CREATE_ORGANIZATION, CREATE_ORGANIZATION_SUCCESS, CREATE_ORGANIZATION_FAILURE,

       } from './constants'
import * as selectors from './selectors'

/*
  CREATE ORGANIZATION
*/
//uses redux-thunk to make the post call happen
export function create (values) {
  return function(dispatch) {
    return axios.post('/url', values).then((response) => {
      dispatch({ type: 'Insert-constant-here'})
      console.log(response);
    })
    }
  }

此外，您需要像这样将您创建的 onSubmit 方法传递到 onSubmitForm 中。我不确定 isLoading 是从哪里来的，因为我没有看到它被导入到那个容器组件中，所以你可能也想看看它。：

  <createOrganization onSubmitForm={this.onSubmit.bind(this)} isLoading={isLoading} />

我建议使用redux-promise-middleware。这个库要求动作有一个命名属性payload这是一个Promise，这是很容易使用axios。然后，它集成了Redux到后缀根动作类型（例如GET_CUSTOMERS）与PENDING，FULFILLED，和REJECTED和火灾的行动。

触发动作与任何其他动作相同。

店铺

import {applyMiddleware, compose, createStore} from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import reducer from './reducers';

let middleware = applyMiddleware(promiseMiddleware());
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(middleware);

export default createStore(reducer, enhancer);

行动

export function getCustomers() {
  return {
    type: 'GET_CUSTOMERS',
    payload: axios.get('url/to/api')
      .then(res => {
        if (!res.ok) throw new Error('An error occurred.');
        return res;
      })
      .then(res => res.json())
      .catch(err => console.warn(err));
  };
}

减速器

export default function(state = initialState, action) => {
  switch (action.type) {
    case 'GET_CUSTOMERS_PENDING':
      // this means the call is pending in the browser and has not
      // yet returned a response
      ...
    case 'GET_CUSTOMERS_FULFILLED':
      // this means the call is successful and the response has been set
      // to action.payload
      ...
    case 'GET_CUSTOMERS_REJECTED':
      // this means the response was unsuccessful so you can handle that
      // error here
      ...
    default:
      return state;
  }
}