React + Redux + thunk에서 비즈니스 로직을 구성하는 방법

Question

나는 프런트 엔드에서 react + redux로 일했습니다. 우리 모두가 REDUX logic.Pratically 사업을 호스팅을 담당하는 컨테이너 구성 요소를 만들 것을 아시다시피

, 우리는 우리가 얻을 이벤트를 전달 할 수mapDispatchToProps와 espetially, mapStateToProps 및 연결 기능 mapDispatchToProps을 제공 할 것입니다 감속기가 크게 작용합니다.

많은 종류의 유형이 있고 각 단계에는 10 단계 이상이 있으므로 "다음 단계", "이전 단계"명령을 구성하고 유효성 검사와 같은 자식 요소 기능을 호출하려고합니다. 이 버튼을 클릭하십시오. 그러나 나는 "ref"가 추천 된 방법이 아니라고 생각합니다. 그러나 REDUX의 원래 디자인, 나는 아래의 코드에서 이벤트를 전달합니다

const mapDispatchToProps = (dispatch, ownProps) => ({ 
    onNext:() => { 
     dispatch(nextStep()); 
    } 
} 

어디 REDUX 디자인 자식 컨트롤의 유효성 검사 문제이다를 호출하는 방법을, 어쩌면 우리가 행동 작성자에 처리해야하지만, 나는 그것이 asyn 요청이나 단순한 객체를 가진 액션이라고 생각한다. 로직을 처리해서는 안된다. "어떻게 동작 하는가"를 처리 할 컨테이너 객체를 소개하기 때문이다.

그래서 나는 다음과 같이 자식 컨테이너에 컨트롤러를 노출 :

export { 
    childContainer, 
    childNavController 
}; 

자식 요소 및 논리를 렌더링하는 데 사용되는 아이 컨테이너, childNavController 유효성 검사 기능을 노출 할 수 있습니다. 그러나이 방법으로 우리는 파견 개체에 액세스 할 수없는, 그래서 나는 다음을 수행하십시오 나는 또한이 이해하는 방법입니다

const nextStep=(childCreator)=>{ 
    return function (dispatch, getState) { 
    return Promise.resolve().then(()=>{ 
     const currentState = getState(); 
     const controller=childCreator(currentState.step); 
     // this make the business also can work with dispatch object 
     controller.validation(dispatch,getState); 
    }); 
    } 
} 

있지만 : 액션 만든 파일에서

const mapDispatchToProps = (dispatch, ownProps) => ({ 
    onNext:() => { 
     dispatch(nextStep(wizardCreator)); 
    } 
} 
const wizardCreator= (step) => { 
    // according to the step reuturn different controller instance 
    return childNavController; 
}; 

그것이 이상하게 생각했다, 아니 OO, 아니 우아한 디자인, 그냥 작동 시키십시오.

그래서이 시나리오에 대한 제안이나 제안이 있다면?

Answer 1

mapDispatchToProps을 사용하여 구성 요소 내부에서 작업을 보내지 않아도됩니다. connect(null)(Component)을 호출하기 만하면 구성 요소가 디스패치 기능을받습니다. 그런 다음 메서드를 정의하고 필요한 동작을 디스패치하기 전에 유효성 검사를위한 논리를 수행 할 수 있습니다. 예를 들어

,

import React from 'react'; 
import { connect } from 'react-redux'; 

const Container = (props) => { 
    const onClick =() => { 
    // some logic 
    if (valid) props.dispatch(someAction()) 
    } 
    return <button onClick={onClick}>Next</button> 
} 

export default connect()(Container);