Redux를 사용하는 웹 사용자를위한 약속 사용

Question

내 설정은 Webpack, React, Redux (redux-thunk 포함)입니다.

나는 mouseMove eventListener에 웹 작업자를 통합하기 위해 노력하고 있습니다. 사용자가 드로잉 앱에서 드로잉 할 때 '그룹 선택'rect와 충돌하는 요소를 찾아야합니다.

웹 노동자에 대한 호출

내가 다음과 같이 결의에 따라, FUNC (해결)을 생성 페이로드를 호출하는 약속을 높이기 위해 노력하고, 작업 제작자의 함수 내에서, 그래서 비동기 될 것입니다 :

액션 CREATOR :

export const groupSelectionPayload = (a, b, c) => { 
    let something = doSomething(a, b); 
    return(new Promise(function(resolve, reject){ 
     let selectedElements = getSelectedElements(something, c); 
     // Im not sure about the below condition, 
     // which I am using to call either resolve/reject funcs, 
     // is there a better way to handle this? 
     if(selectedElements !== undefined){ 
      resolve(something); 
     } else { 
      reject(); 
     } 
    })); 
}; 

// when promise resolves, we return the action to dispatch 
const resolve = function(rectCoOrd){ 
    return ({ 
     type : CREATE_GROUP_SELECTION_RECT, 
     svgPayload : { 
      curToolbarCtrlSelection : { 
       ctrlName : "grpSelect", 
       props : { 
        pos : { 
         x : rectCoOrd[ 0 ], 
         y : rectCoOrd[ 1 ], 
         w : rectCoOrd[ 2 ], 
         h : rectCoOrd[ 3 ] 
        } 
       } 
      } 
     } 
    }); 
}; 

// func posts message to web-worker 
const getSelectedElements = (something, c) => { 
    worker_handler.postMessage(iMap({ 
     type : "grpSelect", 
    })); 
}; 

나는 오류를 얻을, 비동기를 위해 돌아 오는-썽크를 사용하여, 아직 오전 : uncaught exception : undefined

: Error: Actions must be plain objects. Use custom middleware for async actions.은 얹는

무엇이 잘못 되었습니까? 위에서 설명한 시나리오를 처리하는 데 더 합리적인 방법이 있습니까?

편집 : 나는 내가 가지고있는 redux-promise 미들웨어를 설치하는 데 필요한.

const store = createStore(reducer, composeEnhancer(applyMiddleware(thunk, promiseMiddleware))); 

... Actions must be plain objects ... 오류를 해결했습니다. 그러나 여전히 uncaught exception : undefined 오류가 발생합니다.

Answer 1

이 잘 나는 당신의 행동 작성자과 같이 보일 것 같아요 메소드를 호출합니다

export const groupSelectionPayload = (a, b, c) => dispatch => { 
    //do some async stuff like so: 

    new Promise((res, rej) => { … }) 
    .then(data => dispatch({type: 'success', payload: { data }})) 
    .catch(error => dispatch({type: 'error', payload: { error }})) 
} 

돌아 오는 썽크가 매개 변수로 파견을 가진 창조자에서 돌아왔다. 따라서 해당 메서드 내에서 비동기 작업이 완료 될 때 또는 전에 또는 진행될 때 다른 작업을 전달할 수 있습니다.

또한 redux thunk는 작업 작성자가 제공 한 함수의 값을 반환합니다. 그래서도 할 수 있습니다

const someAction = id => dispatch => new Promise((res, rej) => { 
    const result = something(id); 
    if (result !== null) { 
    dispatch({type: 'success', payload: { result }}) 
    res(result); 
    } else { … } 

}); 

그리고

구성 요소 당신보다에서 :

this.props.action(<id>).then(/*getting fancy here, update State or something*/); 

그러나 당신이 webWorker을 처리 할 때, 나는 미들웨어 코드 넣어 더 좋은 장소가 될 것이라고 생각 :

을

const customMiddleware = store => { 
    //create and connect to the worker here 
    const worker = … 
    worker.onmessage = msg => store.dispatch({type: 'workermsg', payload: {msg}}); 
    return next => action => { 
    if(action.type !== 'posttoworker') return next(action) 
    worker.postMessage(action.payload.msg) 
    } 
} 

작업자 코드를 중간에 사용하는 작업자 코드에 대해서는별로 신경 쓰지 않았습니다 ...