promise/thunk를 사용하여 감속기로 인수 인수

Question

저는 Promise/thunk를 미들웨어로 사용하고 있습니다. 그것은 위대한 작품.

알아낼 수없는 일이 있습니다. 다음 작품 :

가

this.props.dispatch(addTag({ name: name, photoId: this.props.photoId})) 

내 작업을 썽크에 싸여 아약스를 실행하고 약속 반환 :

export function addTag(payload) { 


var url = "/api/photos/".concat(payload.photoId, "/addtag?name=" ,payload.name) 
    return function(dispatch) { 
    var request = new Request(url, {headers: headers}); 
    fetch(request) 
     .then((response) => { 
     dispatch({type: "ADD_TAG", payload: response.json()}) 
     }) 
     .catch((err) => { 
     dispatch({type: "ADD_TAG", payload: err}) 
     }) 
    } 
} 

을하고 만회를 집어

내 구성 요소에서 작업을 파견 :

case 'ADD_TAG_FULFILLED': { 
    newState = state 
     .set('tags', action.payload.tags) 
     .set('inputValue', '') 
    return newState 
    } 

이제 액션에 전달되는 페이로드를 감속기? (내가 상태로 돌아가서 구성 요소로 돌아가려면 ... 나는 썬크와 약속 미들웨어 기능을 "깨뜨리는"것을 혼합하여이 작업을 수행 할 수 있습니다.이게 최상의 솔루션입니까?

export function addTag(payload) { 
    var url = "/api/photos/".concat(payload.photoId, "/addtag?name=" ,payload.name) 
    return function(dispatch) { 
    var request = new Request(url, {headers: headers}); 
    fetch(request) 
     .then((response) => { 
     return (response.json()) 
     }) 
     .then((json) => { 
     dispatch({type: "ADD_TAG", payload: {suggestions: json, pl: payload}) 
     }) 
     .catch((err) => { 
     dispatch({type: "ADD_TAG", payload: err}) 
     }) 
    } 
} 

Answer 1

감사

솔루션은 @Mateusz :

export function tagInput(tagInput) { 
    var url = '/api/photos/get_tag_list?term='.concat(tagInput); 
    return function (dispatch) { 
    var request = new Request(url, { headers: headers, method: 'GET' }); 
    fetch(request) 
     .then(response => { 
     dispatch({ type: 'TAG_INPUT', payload: response.json() }); 
     }) 
     .catch((err) => { 
     dispatch({ type: 'TAG_INPUT_ERROR', payload: err }); 
     }) 
     .then(() => { 
     dispatch({ type: 'TAG_INPUT_VALUE', payload: tagInput }); 
     }); 
    }; 
}