mapStateToProps에서 강제로 업데이트하는 방법은 무엇입니까?

Question

저는 mapStateToProps 인수가 connect 인 것에 대해 이야기하고 있습니다.

내 구성 요소 중 하나에는 기능 배열 인 rules이라는 속성이 있습니다. mapStateToProps에서 나는 그 규칙을 호출하여 현재 상태를 전달합니다. 오류가없는 경우 규칙은 오류 메시지 또는 true을 반환합니다. 최종 구성 요소가 일련의 함수 대신 오류 메시지 배열을 수신하도록 이러한 오류 메시지를 새 소품에 넣습니다.

지금까지이 기능이 훌륭하게 작동했지만 지금은 비동기 규칙에 대한 지원을 추가하려고합니다. 내 계획은 지금 규칙이 오류 문자열 대신 Promise를 반환 할 때마다 오류 메시지 배열에 "Checking ..."과 같은 메시지를 푸시하지만 일단 약속이 완료되면 "새로 고침"해야합니다. 이 배열을 삽입하고 해결 된 메시지를 삽입하십시오.

내가 할 수있는 경우 force an update 그러면 redux는 mapStateToProps을 다시 호출해야합니다. 그러한 경우, 모든 규칙이 재평가 될 것이지만, 신중하지 않으면 나는 새로운 약속을 받게 될 것입니다. 그러나 이러한 규칙을 메모하면 이전과 같은 Promise 인스턴스를 다시 가져올 수 있으며 check ifit's settled 그 값을 대신 내 오류 배열에 넣을 수 있습니다.

이제 문제는 현재 상태와 소품에만 액세스 할 수있는 mapStateToProps 컨텍스트 내에서 구성 요소 인스턴스에 대한 참조를 얻는 방법을 찾는 것입니다.

약속이 해결되면 다시 렌더링 할 수있는 방법이 있습니까?

또는 해결할 때 수행 할 작업이 있다면, 그 작업도 가능합니다.

Answer 1

mapState에서이를 수행 할 수 없습니다. mapState 함수는 완전히 동기식입니다. 비동기 작업을 수행해야하는 경우 mapState 외부에서 트리거하고 상태에 일부 값을 저장 한 다음 결과를 업데이트하여 mapState을 다시 실행하십시오.

Answer 2

상태 기반 구성 요소를 만드는 방법은 어떻습니까? 구성 요소의 상태에서 약속 결과를 유지하면 약속이 해결되면 구성 요소가 자동으로 다시 렌더링됩니다.

import React, {Component} from 'react'; 
import {connect} from 'react-redux; 
import Promise from 'promise'; 

class MyStatefulComponent extends Component { 
    constructor(props) { 
     this.state = { 
      messages: [] // initialize empty, or with the synchronous rules 
     }; 
    } 

    componentWillMount() { 
     const setState = this.setState; 
     const rules = this.props.rules; // rules contains a list of either evaluated rules or promises 
     Promise.all(rules).then(results => { 
      // this is executed once all the promises in rules have resolved 
      // setState will trigger a re-render of this component 
      setState({ 
       messages: [] // construct your array of messages here from the results 
      }); 
     } 
    } 

    render() { 
     // render your list of messages 
     return <ul> 
      {this.state.messages.map(message => <li>{message}</li>)} 
     </ul>; 
    } 
} 

export default connect(
    (state, ownProps) => ({ 
     rules: ownProps.rules.map(rule => rule(state)) 
    }) 
)(MyStatefulComponent);