Как получить значения прописки из редуктора перед выполнением render ()?

Question

Я использовал промежуточное программное обеспечение redux-thunk и получаю значения из реквизита только после выполнения рендеринга. Как я могу получить значения 'Contents', которые должны быть установлены в реквизитах перед вызовом рендера ??

UNSAFE_componentWillMount() {
    this.getAllArticle();
}

getAllArticle = () => {
    this.props.onGetAllArticle(); `
}

render() {

 {this.props.contents ? this.props.contents.map((obj, index) => (
                        <tr key={index}>
                            <td> {obj.id} </td>
                            <td> {obj.title}</td>
                            <td> {obj.context}</td>
                        </tr> 
                    )) : 'No Data'}}

function mapStateToProps(state) {
 return {
   contents: state.all
 }
}

function mapDispatchToProps(dispatch) {
 return { 
   onGetAllArticle: () =>dispatch(actionCreator.onGetAllArticle())
  }
 }

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

Answer 1

Поскольку вы запускаете диспетчерский вызов в UNSAFE_componentWillMount (который я не рекомендую, поскольку название предполагает, что он небезопасен и будет устаревшим), полученный вами ответ будет доступен только после первоначального рендеринга.

Решение состоит в том, чтобы отображать состояние загрузки для ПОЛЬЗОВАТЕЛЯ во время выборки данных, поскольку у вас не будет данных при первоначальном рендеринге. Для этого в вашем редукторе должно быть состояние загрузки, которое изначально установлено в true

render() {

   {this.props.contents ? this.props.contents.map((obj, index) => (
                        <tr key={index}>
                            <td> {obj.id} </td>
                            <td> {obj.title}</td>
                            <td> {obj.context}</td>
                        </tr> 
                    )) : this.props.isLoading? 'Loading...': 'No Data'
   }
}

function mapStateToProps(state) {
 return {
   contents: state.all,
   isLoading: state.isLoading
 }
}

function mapDispatchToProps(dispatch) {
 return { 
   onGetAllArticle: () =>dispatch(actionCreator.onGetAllArticle())
  }
 }