使用React，Redux和Axios处理异步请求？

使用React，Redux和Axios处理异步请求？

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

CodeSandbox