Generischer API-Aufruf mit Redux-Middleware und Redux-Thunk

Question

Ich habe versucht, eine Middleware zu erstellen, die sich um alle meine APIS kümmert.

Store Configuration

In meinem Speicher ich apiMiddleware ist Hinzufügen [CALL_API] zu verwenden. Außerdem füge ich redux-thunk mit extraArgument hinzu, um auf die generische API zuzugreifen, die ich in meiner Versandmethode erstellt habe.

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

Reducer

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; 
    } 
} 

Aktion

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

Middleware API

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

Dies funktioniert nicht. Wenn ich jedoch den Middleware-Code unter meine Action-Funktion setze, funktioniert es gut.

Answer 1

Sie müssen das Rad nicht neu erfinden. Sie könnten redux-auto verwenden diese

hier zu tun ist, Sie Beispiel: 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

this helps