redux-middleware 및 redux-thunk를 사용한 일반 API 호출

Question

모든 APIS를 처리하는 미들웨어를 만들려고했습니다. 내 가게에서

스토어 구성

나는 [CALL_API]를 사용하는 apiMiddleware를 추가하고있다. 이와 함께 여분의 - 썽크를 사용하여 extraArgument를 사용하여 디스패치 메소드에서 생성하는 일반 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을 사용할 수있는 것은 예입니다 저장/사용자/

// 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로이

을하는 데 도움이