使用redux-middleware和redux-thunk的通用API調用

Question

我試圖創建一箇中間件來照顧我所有的APIS。

存儲配置

在我的商店我加入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 
    } 
    } 
} 

這不起作用。但是，如果我把中間件代碼放在我的動作函數下，它可以正常工作。

Answer 1

你不需要重新發明輪子。你可以使用redux-auto做到這一點

這裏是你例子：店/用戶/ 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

希望這有助於