redux-middlewareとredux-thunkを使用した汎用APIコール

Question

私はすべてのAPISを処理するミドルウェアを作成しようとしていました。

ストアコンフィギュレーション

私の店で私は[CALL_API]を使用するapiMiddlewareを追加しています。私はディスパッチメソッドで作成した汎用APIにアクセスするために、extraArgumentを使用してredux-thunkを追加しています。

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

あなたは車輪を再発明する必要はありません。これは

を役に立てば幸い

// 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 init.js

/店舗/ユーザー：あなたはここでは、この

は、あなたが一例です行うためにredux-autoを使用することができます