반응 | Redux | Thunk - 구성 요소 내에서 데이터를로드하는 방법?

Question

나는 redux를 통해 API 호출을하여 데이터를 가져 와서 상태를 업데이트하기 위해 componentWillMount를 사용하는 구성 요소를 가지고 있습니다.

이 메서드를 호출하기 전에 DB로 이동하여 첫 번째 단락의 데이터 검색이 수행되어야 하는지를 결정할 속성을 가져와야합니다.

내가 (약속을 사용)하고 생각하고 있었는데 -

1. 데이터가 필요한 경우
2. 후, 정상 흐름 (제 1) 파견 (제 2 항)에서 속성을 가져옵니다.
3. 데이터가 필요하지 않으면 계속 수행하십시오.

나의 질문은 어디 론가해야합니까?

한편으로는 가게를 통해 지나치게 과장된 느낌이 들었습니다. 다른 한편으로는, 부작용 문제가 발생할 수 있습니다. 또한 구성 요소 또는 작업 작성자에서 논리를 구현할 수 있습니다. 당신이 생각하는 가장 좋은 점은 무엇입니까?

추가 정보 : 1. 나는 redux-thunk를 사용하고 있습니다. 무용담으로 변하는 것은 의문의 여지가 없습니다. 2. 내가 조사하는 속성은 1 감속기에 있지만 반입해야하는 데이터는 다른 감속기에 있습니다 (일부 솔루션에서는 문제가 될 수 있음).

옵션 1 :

import {getData} from '....../dataActions'; 
import {getToken} from '......../userActions'; 

const MegaComponent extends React.Component { 
    componentWillMount() { 
    getToken(uid) 
     .then(shouldUpdate => { 
     if (shouldUpdate) { 
      getData(uid); 
     } else { 
      console.log('no need to get data'); 
     } 
     }) 
    } 
} 

funciton mapStateToProps(state, ownProps) { 
    return { 
    user: state.user 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    getToken: (uid) => dispatch(getToken(uid)), 
    getData: (uid) => dispatch(getData(uid)) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(MegaComponent); 

옵션 2 (내가 수행해야합니다 생각)

export function getToken(uid) { 
    return dispatch => { 
    return api.getToken(uid) 
     .then(token => { 
     if (token === 'what it should') { 
      return {type: 'NO_DATA_CHANGE_NEEDED', action: null}; 
     } else { 
      // the action that handle getting data is in a different action creator. 
      // I either import it here and call it, or there's a better way. 
     } 
     }) 
    } 
} 

UPDATE

이 미래 visiotrs을 위해 유용하게 사용할 수 있습니다 - getting state inside an action creator

Answer 1

안녕하세요 이것은 매우 광범위한 질문입니다. 그러나 제가 완전히 옳은지 확실하지는 않지만 그것을 해결할 방법에 대한 짧은 조언을 드리고 싶습니다.

그래서 나는 점 1. (데이터베이스 호출) 및 2 (다른 모든)의 우려를 분리하여 시작할 것

당신은 서면으로 시작할 수

컴포넌트 - 래퍼 (HOC)에만 데이터베이스 호출을 수행하는 추가 가공을 위해 필요한 지주를 얻으십시오.

일단 db에서 데이터를 가져온 경우 InnerComponent를 데이터로 소품으로 렌더링하고 삽입 한 소품을 확인하고 추가 작업을 트리거하는 등 필요한 모든 작업을 수행 할 수 있습니다.

Answer 2

로직을 다루는 구성 요소를 허용하지 않겠습니다. View에 대한 구성 요소를 모두 유지하십시오. 구성 요소를 특정 시점의 시각적 표현으로 생각하십시오.

componentWillMount에서 데이터가 존재하는지 확인하고 API가 아닌 데이터를 가져 와서 감속기로 전달하는 작업을 호출 할 수 있습니다. 감속기는 상태를 '업데이트'합니다.

디스패치 호출은 구성 요소가 아닌 actions.js에서 호출해야합니다.

Answer 3

그래서 제 느낌이 옳았습니다 - 옵션 2입니다. @ guruPitka가 제안한 것과 비슷합니다.

(컴포넌트에 의해 호출되는) 액션 생성자에서 현재 앱 상태를 가져 와서 API 호출을 작성하고 토큰을 비교 한 다음 그에 따라 조치를 취합니다.

export function getToken(uid) { 
    return (dispatch, getState) => { 
     const currentToken = getState().user.token; 

     return api.lastAppLaunch(uid) 
      .then(newToken => { 
       if (newToken === currentToken) { 
        // All is good, carry on. 
       } else { 
        dispatch(getData(uid)); //getData is from a different action creator. 
       } 
      }); 
    } 
} 

그리고 구성 요소의 호출 -

this.props.getToken(uid);