Redux를 사용하여 API에서 데이터를 올바르게로드

Question

API에서로드하기 위해 Redux의 정보가 필요한 구성 요소가 있습니다. 이 상황을 다루는 가장 효율적인 방법을 배우고 싶습니다.

은 (간체) 설명하기 :

class someComponent extends React.Component{ 
    constructor(props){ 
    super(props) 
    this.state = {data: null} 
    } 
    componentWillMount(){ 
    if(this.props.reduxstate){ //api needs reduxstate 
     api(`/someroute?q1=reduxstate') 
     .then((data)=>this.setState({data:data}) 
    } 
    } 

    render(){   
    return(
     <div> 
     <AnotherComponentNeedingAPIData data={data} /> 
     </div> 
    ) 
    } 


    function mapStateToProps(state){ 
    return{ 
     state.reduxstate 
    } 
    } 

이 명확하게하기 위해, 여기에 오류가 API를 결코로드 그래서 componentWillMount 안타 때 reduxstate를 사용할 수없는 것입니다. 나는이 오류에 관심이 없다. 정확한 패턴이 위의 상황에 있어야한다.

나는 원래이 문제에 대해 여러 차례 반복했다. 이 문제를 해결할 방법이 하나 이상 있다는 것을 알고 있지만 올바른/가장 간단한 방법이 누락 된 것처럼 느껴집니다. 위의 일반적인 패턴은 하위 구성 요소를 무국적으로 유지할 수 있도록 내 선호하는 시작점입니다.

내가 뭘 잘못하고 있는지 (그리고이 문제에 대해 어떻게 올바르게 생각해야합니까?)?

편집 : componentWillRecieveProps를 사용하기로 결정했습니다 ... 괜찮습니다. 그러나 구성 요소의 두 위치에 데이터를로드하는 것과 관련하여 적절한 접근 방식이 아닙니다.

Answer 1

가장 간단한 방법은 componentWillRecieveProps입니다. 괜찮습니다. 또는 api 호출의 응답을 전달할 수 있으며 api를 필요로하는 구성 요소는 redux를 통해 액세스 할 수 있습니다. 그러나 한 곳에서만 데이터를 사용하는 경우 불필요합니다.

로직이 훨씬 복잡해지면 일부 비동기 redux 라이브러리는 구성 요소 (예 : redux-thunk 또는 redux-saga)에서 구현 세부 정보를 추출하는 데 유용 할 수 있습니다.

나는 redux saga를 좋아하는데, 당신은 redux로 파견 된 작업을 듣고 API 호출과 같은 비동기 작업을 수행하고 더 많은 작업을 파견 할 수 있습니다.

이렇게하면 redux 저장소에 api 데이터도 갖게되므로 데이터가 필요한 구성 요소가 바로 redux와 직접 연결될 수 있습니다.

간접적 인 기능이 추가되었으므로이 솔루션으로 즉시 넘어 가지 않습니다.