구성 요소 외부에서 Redux 동작을 트리거할 수 있습니까?

구성 요소 외부에서 Redux 동작을 트리거할 수 있습니까?

이 질문에는 이미 답변이 있습니다.

반응 컴포넌트 외부에 있는 레덕스 스토어에 액세스하는 가장 좋은 방법은 무엇입니까? (11개의 답변)

빈 javascript 파일에서 디스패치 함수를 호출합니다. (2개의 답변)

닫힘4년 전에요.

리액트 앱을 만들고 있으며, 커스텀 핸들러 라이브러리에 전화를 걸어 REST API에 콜을 발신하고 있습니다.

이러한 (비반응) 함수에서 엔드포인트 응답으로 저장소를 업데이트하기 위해 Redx 액션을 트리거하고 싶지만 일반적인 'mapDispatchToProps'/connect() 메서드 없이 Redex 액션을 트리거하는 방법을 찾을 수 없습니다.

이게 가능합니까?

감사해요.

범위 밖에서 디스패치 및 액션을 수행하려면 스토어 인스턴스를 가져와 다음과 같이 호출해야 합니다.

import { store } from '/path/to/createdStore';
​
function testAction(text) {
  return {
    type: 'TEST_ACTION',
    text
  }
}
​
store.dispatch(testAction('StackOverflow'));

Promise에서 사용한 해결/거부 또는 onSuccess/onError 패턴을 복사하는 것을 매우 좋아합니다.

그러니 너도 똑같이 했으면 좋겠어.커스텀 핸들러를 호출하여 onSuccess 및 onError 콜백을 전달합니다.따라서 데이터를 가져올 때 Success를 호출할 수 있으며 오류가 발생한 경우 onError 콜백을 호출할 수 있습니다.

onSuccess 및 onError는 사용자에게 무언가를 보여주거나 다른 작업을 수행하는 컴포넌트 내 함수입니다(오류 발생 시 오류 토스트 메시지 표시?!).

예를 들어 보겠습니다.

export default class CustomService{
    getData(onSuccess, onError){
        //axios.get(...) or fetch(...)
        if(success) call onSuccess(result)
        if(error) call onError(error)
    }
}

export default class MyComponent extends React.Component{
   constructor(props){
       super(props);

       this.state = {
           showError:false
       }

       this.customService = new CustomService();

       this.onSuccess = this.onSuccess.bind(this);
       this.onError = this.onError.bind(this);
   }

   componentDidMount(){
       this.customService.getData(this.onSuccess, this.onError);
   }

   onSuccess(result){
       // Do something if necessary
       // Call the redux action
   }

   onError(error){
       //Show a toast message to user or do something else
       this.setState({showError:true});
   }
}

onSuccess에서 Redx에 전화를 걸어 데이터를 저장할 수 있습니다.

언급URL : https://stackoverflow.com/questions/50962628/is-it-possible-to-trigger-a-redux-action-from-outside-a-component