使用 redux-middleware 和 redux-thunk 的通用 API 调用答案

【问题标题】：Generic API call using redux-middleware and redux-thunk使用 redux-middleware 和 redux-thunk 的通用 API 调用
【发布时间】：2017-02-04 22:44:20
【问题描述】：

我试图创建一个处理我所有 API 的中间件。

商店配置

在我的商店中，我正在添加 apiMiddleware 以使用 [CALL_API]。除此之外，我还使用 extraArgument 添加了 redux-thunk 来访问我在调度方法中创建的通用 API。

export default function configureStore(initialState) {
  const store=createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(apiMiddleware,thunk.withExtraArgument(api))))
  return store
}

减速器

const initialState =  {
  data : []
}


export default function users(state=initialState,action){
  switch(action.type){
    case 'RECEIVE_USER_DATA':
      return Object.assign({},state,{
        data : action.payload
      })

    case 'FAILURE_USER_DATA':
      return state

    default:
      return state;
  }
}

动作

export function fetchUserData(){
  return (dispatch,getState,api) => {
    const url = 'https://jsonplaceholder.typicode.com/users/';
    const method = 'GET'
    const actionTypes = ['REQUEST_USER_DATA','RECEIVE_USER_DATA','FAILURE_USER_DATA']
    api(url,method,actionTypes)
  }
}

中间件 API

export default function api(url,method,actions){
  return {
    [CALL_API] : {
      endpoint : url,
      method : method,
      types: actions
    }
  }
}

这不起作用。但是，如果我将中间件代码放在我的操作函数下，它就可以正常工作。

【问题讨论】：

标签： reactjs redux react-redux redux-thunk redux-middleware

【解决方案1】：

您无需重新发明轮子。您可以使用redux-auto 来执行此操作。

这是你的例子：store/user/init.js：

// Reducer
export default function (state, payload, stage, result) {

  switch(stage){
    case 'FULFILLED':
    return Object.assign({},state,{ data : result })
      break;
    case 'REJECTED':
      break;
    case 'PENDING':
    default :
      break;
  }
  return user;
}
// Action
export function action (payload){
  return fetch('https://jsonplaceholder.typicode.com/users/',{
      method: 'GET'
    }).then( data => data.json() );
}

Working example

【讨论】：